ReactJS：默认情况下，如何在我的应用程序中向任何React组件添加功能

Question

假设这是我将函数传递给MyComponent的方式：

<MyComponent
  setMyValue={this.setMyValue}
  setYourValue={this.setYourValue}
  updateTheirValues={this.updateTheirValues}
  updateHerValue={this.updateHerValue}
  loadHisValue={this.loadHisValue}

  {...this.props}
/>

无论如何，我可以向我的应用程序中的任何组件添加功能-称为_passFunctions之类的功能：

<MyComponent
    __passFunctions={[
      this.loadHisValue,
      this.updateHerValue,
      this.updateTheirValues,
      this.setYourValue,
      this.setMyValue
    ]}
    {...this.props}
  />

Answer 1

您可以使用在对象中传播的对象

示例

const MyComponent = (props) => {
  console.log(props);
  return <div></div>
}

const App = () => {

  const loadHisValue = () => {};
  const updateHerValue = () => {};
  const updateTheirValues = () => {};
  const setYourValue = () => {};
  const setMyValue = () => {};

  const functionalities = {
    loadHisValue,
    updateHerValue,
    updateTheirValues,
    setYourValue,
    setMyValue
    };

  return <div>
    <MyComponent {...functionalities}/>
  </div>
}


ReactDOM.render(
    <App/>,
    document.getElementById('root')
  );

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>

要在我的应用程序中的任何组件上执行：

您可以提取功能以分离模块，并以上述方式在每个组件中使用它，也可以遵循最佳实践并使用React.Context或Redux

Answer 2

[您可以使用下划线或类似符号的pick从对象中提取特定键，例如像：

<MyComponent
  { ..._.pick(
    this,
    'loadHisValue',
    'updateHerValue',
    'updateTheirValues',
    'setYourValue', 
    'setMyValue'
  )}
  {...this.props}
/>