Question

我很反应，我想知道将处理程序从顶级元素传递给深层嵌套子元素的正确方法是什么。我发现自己通过中间儿童道具移动处理程序，但如果感觉像流水线，它不是正确的解决方案。我想有更好的方法。感谢您的任何指示

Answer 1

您可以考虑的一件事是使用redux和react-redux＆＃39; s connect来＆＃34;连接＆＃34;您深层嵌套的子组件到商店。

/* your deeply nested child */
import { connect } from 'react-redux';
import { actionCreator1, actionCreator2 } from './path/to/actionCreators';

@connect(
  (state) => ({
    prop1: state.path.to.prop1,
    prop2: state.path.to.prop2
  }),
  (dispatch) => ({
    onBtnClick: e => dispatch(actionCreator1()),
    onSomethingChange: e => dispatch(actionCreator2(e.target.value))
  })
)
class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <input
          type="text"
          value={this.props.prop1}
          onChange={this.props.onSomethingChange}
        />
        <button onClick={this.props.onBtnClick}>submit</button>
      </div>
    );
  }
}

并在您的根组件中：

import store from './path/to/reduxStore';
import { Provider } from 'react-redux';

class RootComponent extends React.Component {
  render() {
    <Provider store={store}>
      <YourParentComponent />
    </Provider>
  }
}

更详细的例子是Usage with React

反应通信中的嵌套元素

1 个答案: