web-dev-qa-db-fra.com

Accès à l'état parent dans l'enfant dans React

J'ai (par exemple) deux composants dans React. Le premier, app.js, est le composant racine. Il importe des données JSON et les met dans sa state. Cela fonctionne bien (je peux le voir dans les outils de développement React).

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

Le second, docs.js, est destiné à afficher ces données JSON. Pour ce faire, il doit accéder à la state de app.js. Pour le moment, il se trompe et je sais pourquoi (this n'inclut pas app.js). Mais comment puis-je passer la state de 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
16
GluePear

Pour ce faire, il convient de passer l'état de props à Docs.

Cependant, étant donné que vous utilisez React Router, vous pouvez y accéder de différentes manières: this.props.route.param au lieu de la valeur par défaut this.props.param.

Donc, votre code devrait ressembler plus ou moins à ceci:

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

et

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

Une autre façon de faire est:

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

Si vous avez besoin de passer des enfants:

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

Si vous le faites comme ceci, vous pouvez accéder à vos valeurs d'accessoires directement par this.props.docs dans le composant enfant:

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

Une autre façon de faire sera

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

Dans le composant enfant, vous pouvez accéder à docs en utilisant

this.props.docs

J'espère que ça aide!

0
lavee_singh