反应通讯中的嵌套元素

Question

我是相当陌生的反应，我想知道从顶级元素到深层嵌套的子级传递处理程序的正确方式是什么。 我发现自己移动中间儿童道具的处理程序，但如果感觉像流水线，它不是正确的解决方案。 我想有更好的方法来做到这一点。 感谢任何指针可以考虑

Answer 1

的一件事是使用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