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

Question

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

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 组件。

你绝对可以通过 props 将请求函数传递给 page/content 组件的子按钮。

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

Answer 2

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

You can read it here : how-to-use-context

但不鼓励使用上下文。

You can read it here: 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>
    )
  }
}

we call this concept as higher order components in react. This is basically a design pattern that comes out of react component approach

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

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

How to customize requests inside a React component

javascript

reactjs

react-component