反應通訊中的嵌套元素

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