Reactの子供の親状態へのアクセス

Question

私はReactに2つのコンポーネントを持っています。最初の番号はapp.jsで、ルートコンポーネントです。一部のJSONデータがインポートされ、stateに格納されます。これはうまく動作します（React devtoolsで見ることができます）。

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

秒、docs.jsは、このJSONデータを表示することを意味します。そのためにはstateにapp.jsにアクセスする必要があります。現時点ではエラーが発生しており、理由はわかります（thisにはapp.jsが含まれていません）。しかし、どうすればstateをapp.jsからdocs.jsに渡すことができますか？

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

Answer 1

これを行うための適切な方法は、propsDocsにコンポーネントとして状態を渡すことになります。しかし

、あなたはそれが少し異なる方法でアクセスすることができReact Routerを使用しているので：this.props.route.paramの代わりに、デフォルトthis.props.param

だからあなたのコードは次のように多かれ少なかれになります。

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

と

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

Answer 2

これを行う別の方法は次のとおりです。

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

あなたが子供を渡す必要がある場合：

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

Answer 3

別の方法を：

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

あなたはこのようにそれをやっている場合は、あなたが子供コンポーネントでthis.props.docsによって直接小道具の値にアクセスすることができますこれを行うのは

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

子コンポーネントにアクセスすることができますdocs

this.props.docs 

希望します。