反応中のネストされた要素

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

です