javascript - 如何在 React 组件中自定义请求

Question

我有一个组件 ContentHeader，我将在几乎每个内容中使用它，它提供一个带有标题的标题和两个按钮，新建和搜索。

import React from 'react';
import Title from 'components/Title';
import BtnSearch from 'components/BtnSearch';
import BtnNew from 'components/BtnNew';

class ContentHeader extends React.Component {
  constructor (props) {
    super(props);
  }

  render () {
    return (
      <div className='content-header'>
        <Title name={this.props.title} />

        <ul className='actions'>
          <li className='action-item'>
            <BtnSearch />
          </li>
          <li className='action-item'>
            <BtnNew />
          </li>
        </ul>
      </div>
    );
  }
}

export default ContentHeader;

我在 ContentHeader 中使用的按钮组件:

// Component Button Search
import React from 'react';
import { NavLink } from 'react-router-dom';

class BtnSearch extends React.Component {
  constructor (props) { 
    super(props);
  }

  render () {
    return (
      <a className='btn-actions btn-search' onClick=CUSTOM_REQUEST>
        <span className="icon-center"></span>
      </a>
    )
  }
}

export default BtnSearch;


// Component Button New
import React from 'react';
import { NavLink } from 'react-router-dom';

class BtnNew extends React.Component {
  constructor (props) { 
    super(props);
  }

  render () {
    return (
      <NavLink to=CUSTOM_REQUEST className='btn-actions btn-new'>
        <span className="icon-center"></span>
      </NavLink>
    )
  }
}

export default BtnNew;

假设我将拥有 Projects、Contracts 和 Widgets 主要内容，我需要在其中使用 ContentHeader。

对于每个主要内容，我都会有一个不同的标题标签，我可以通过 Prop 传递它，因为只有一层深。而且，我将对 ContentHeader 组件内的每个按钮有不同的请求，与它所属的主要内容相关。

那么，如何将这些不同的请求传递给与我的主要内容相关的按钮呢？ Prop 也是？如果我有一个更深的组件树呢？

PS:举个例子，我在带有 CUSTOM_REQUEST 标志的按钮组件中使用了 NavLink 和一个简单的 onClick

谢谢!

Answer 1

如果我正确理解您的问题，您需要能够根据内容类型将特定请求传递到相应的 ContentHeader 组件。

您绝对可以通过 props 将该请求函数传递给该页面/内容组件的子按钮。

import React from 'react';
import Title from 'components/Title';
import BtnSearch from 'components/BtnSearch';
import BtnNew from 'components/BtnNew';

class ContentHeader extends React.Component {
  constructor (props) {
    super(props);
  }

  render () {
    const { myRequestFunc } = this.props
    //...or if not es15
    var myRequestFunc = this.props.myRequestFunc

    return (
      <div className='content-header'>
        <Title name={this.props.title} />

        <ul className='actions'>
          <li className='action-item'>
            <BtnSearch />
          </li>
          <li className='action-item'>
            <BtnNew requestFunc={myRequestFunc} />
          </li>
        </ul>
      </div>
    );
  }
}

export default ContentHeader;

无论如何，这是简单的方法。你可以——根据你的应用程序的大小——探索 Redux、React-Redux 和 Redux-Thunk 或 Redux-Saga 来避免 props 不可避免地向下传递几个级别。 Checkout using redux with react