如何在 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。

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

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

PS：作为示例，我在按钮组件中使用了 NavLink 和一个简单的 onClick，并带有 CUSTOM_REQUEST 标志

谢谢！

Answer 1

如果我正确理解您的问题，您需要能够根据内容类型将特定请求传递给相应的 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 () {
    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 以避免道具不可避免地向下传递几个级别。 Checkout using redux with react

Answer 2

如果你使用的是普通的 react 并且嵌套太大，那么将 props 传递到每个级别将变得非常困难。在这种情况下，您可以使用 react 中的上下文 API。

你可以在这里阅读：how-to-use-context

但不鼓励使用上下文。

你可以在这里阅读：why not to use context

你可以试试下面的方法

function Wrapper(newBtnAction, searchBtnAction, label, props) {
  return ( < ContentHeader {...props
    }
    label = {
      label
    }
    newBtnAction = {
      newBtnAction
    }
    searchBtnAction = {
      searchBtnAction
    }
    />
  )
}

现在您可以在任何地方使用包装组件，只需通过 store.dispatch 传递正确的函数绑定

假设你有一个组件 B ,C, D, E 你可以像这样使用它

class B extends React.Component {

  render() {
    // get proper actions here
    const {
      newBtnAction,
      searchBtnAction,
      label
    } = this.props
    return ( < C >
      < D >
      < E > {
        Wrapper(newBtnAction, searchBtnAction, label, this.props)
      } < /E> < /D> < /C>
    )
  }
}

我们将此概念称为反应中的高阶组件。这是 基本上是一种来自反应组件方法的设计模式

注意：注意括号，不执行代码