反应通讯中的嵌套元素
问题描述:
我是相当陌生的反应,我想知道从*元素到深层嵌套的子级传递处理程序的正确方式是什么。 我发现自己移动中间儿童道具的处理程序,但如果感觉像流水线,它不是正确的解决方案。 我想有更好的方法来做到这一点。 感谢任何指针可以考虑反应通讯中的嵌套元素
答
的一件事是使用redux
和react-redux
的connect
‘连接’你深深嵌套的子组件商店。
/* 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