web-dev-qa-db-ja.com

Reactで子の親状態にアクセスする

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

2番目のdocs.jsは、このJSONデータを表示するためのものです。そのためには、app.jsのstateにアクセスする必要があります。現時点ではエラーになっており、その理由はわかっています（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>
        )
    }
}
javascriptjsonreactjsstate
20
GluePear

これを行う適切な方法は、状態をpropsとしてDocsコンポーネントに渡すことです。

ただし、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>; 
})}
13
pwolaq

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

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

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

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

このように実行している場合、子コンポーネントのthis.props.docsを使用してprops値に直接アクセスできます。

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

これを行う別の方法は

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

子コンポーネントでは、次を使用してdocsにアクセスできます

this.props.docs

それが役に立てば幸い！

0
lavee_singh