Zugriff auf Elternstatus in Kind in React

Question

Ich habe (z. B.) zwei Komponenten in React. Die erste, app.js, ist die Root-Komponente. Es importiert einige JSON Daten und legt es in seine state. Das funktioniert gut (ich kann es in den React Devtools sehen).

import data from '../data/docs.json'; 

class App extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     docs: {} 
    }; 
    } 
    componentWillMount() { 
    this.setState({ 
     docs: data 
    }); 
    } 
    render() { 
    return (
     <Router history={hashHistory}> 
     <Route path="/" component={Wrapper}> 
      <IndexRoute component={Home} /> 
      <Route path="/home" component={Home} /> 
      <Route path="/docs" component={Docs} /> 
     </Route> 
     </Router> 
    ); 
    } 
} 

Die zweite wird docs.js Diese JSON Daten zu zeigen, gemeint. Dazu muss auf die state von app.js zugegriffen werden. Im Moment ist es fehlerhaft, und ich weiß warum (this enthält app.js nicht). Aber wie kann ich dann die state von app.js zu docs.js übergeben?

class Docs extends React.Component { 
    render() { 
     return(
      <div> 
       {this.state.docs.map(function(study, key) { 
        return <p>Random text here</p>; 
       })} 
      </div> 
     ) 
    } 
} 

Answer 1

Der richtige Weg, dies zu tun, indem Staat als props zu Docs Komponente sein würde.

Da Sie jedoch React Router verwenden es kann ein bisschen anders zugegriffen werden: this.props.route.param statt Standard this.props.param

So sollte Ihr Code aussehen mehr oder weniger wie folgt aus:

<Route path="/docs" component={Docs} docs={this.state.docs} /> 

und

{this.props.route.docs.map(function(study, key) { 
    return <p>Random text here</p>; 
})} 

Answer 2

Eine andere Möglichkeit dies zu tun ist:

<Route path="/docs" component={() => <Docs docs={this.state.docs}/>}> 

Wenn Sie Kinder weitergeben müssen:

<Route path="/" component={(props) => <Docs docs={this.state.docs}>{props.children}</Docs>}> 

Wenn Sie es so tun, dann können Sie Ihre Requisiten Werte direkt zugreifen, indem this.props.docs in Kinder Komponente:

{ 
    this.props.docs.map((study, key)=> { 
     return <p key={key}>Random text here</p>; 
    }) 
} 

Answer 3

Ein anderer Weg, dies zu tun wird

 <Route path='/' render={ routeProps => <Home 
      {...routeProps} 
      docs={this.state.docs} 
      /> 
      } 
     /> 

Während in der Kind-Komponente können Sie docs mit

this.props.docs 

Hope es hilft!