ReactJS: как добавить функциональность к любому компоненту React по умолчанию в моем приложении - PullRequest
Новая
       65

ReactJS: как добавить функциональность к любому компоненту React по умолчанию в моем приложении

1 голос
/ 27 мая 2020

Скажем, вот как я передаю функции в 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}
  />

Ответы [ 2 ]

0 голосов
/ 27 мая 2020

Вы можете использовать выбрать из подчеркивания или аналогично для извлечения определенных c ключей из объекта, например: 

<MyComponent
  { ..._.pick(
    this,
    'loadHisValue',
    'updateHerValue',
    'updateTheirValues',
    'setYourValue', 
    'setMyValue'
  )}
  {...this.props}
/>
0 голосов
/ 27 мая 2020

Вы можете использовать распространение объекта в компоненте

Пример 

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

...