verschachtelte Elemente in reagieren Kommunikation

Question

Ich bin ziemlich neu zu reagieren und ich fragte mich, was ist die richtige Art und Weise der Übergabe von Handlern von Top-Level-Element zu tief verschachtelten Kind. Ich fand mich Handler durch intermediate Kinder Requisiten, aber wenn es sich anfühlt wie Pipelining ist es nicht die richtige Lösung. Ich denke, es gibt einen besseren Weg, dies zu tun. Danke für alle Hinweise

Answer 1

Eine Sache, die Sie betrachten können redux verwenden und react-redux ‚s connect zu‚verbinden‘Ihre tief verschachtelten untergeordneten Komponenten zu einem Geschäft.

/* 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> 
    ); 
    } 
} 

und in der Stammkomponente:

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

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

Detailliertere Beispiel ist hier Usage with React