L'accès parent de l'état de l'enfant à Réagir

J'ai (par exemple) deux composants de Réagir. La première, app.js, est le composant racine. Importations de certains JSON de données et la met dans sa state. Cela fonctionne très bien (je peux le voir dans la Réagir 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>
    );
  }
}

La deuxième, docs.js, est destiné à montrer ce JSON de données. Pour ce faire il a besoin d'accéder à la state de app.js. Au moment où il des erreurs, et je sais pourquoi (this ne comprend pas app.js). Mais alors, comment puis-je passer le 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>
        )
    }
}

liées - Comment faire un état partagé entre les deux réagissent composants?

OriginalL'auteur GluePear | 2017-01-24

11

La bonne façon de le faire serait par le passage de l'état comme props à Docs composant.

Cependant, parce que vous êtes à l'aide de React Router il peut être accessible en un peu différent: this.props.route.param au lieu de la valeur par défaut this.props.param

De sorte que votre code devrait ressembler plus ou moins comme 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>; 
})}
```
je ne peux pas envoyer des états de toutes mes 20 componentes, il y a un moyen de le faire avec redux?
Ceci explique rien. en passant c'est la partie la plus facile, mais que faire alors? quelle est la bonne façon de prolonger l'enfant avec l'état de la mère, de sorte qu'ils seront tous deux partagent exactement le même Objet, et non une copie de l'état de l'enfant?
si vous allez passer du parent de l'état de l'enfant comme un accessoire, il sera le même objet.
il sera, dans un premier. mais alors setState sera appelé quelque part dans l'enfant, et puis l'état de l'enfant va être out-of-sync à cause de cette chose nouvelle la nouvelle génération de développeurs aime tellement, appelé l'immuabilité. de l'horrible chose. seules causes des malheurs.
si vous voulez partager de l'enfant de l'état avec le parent, vous devez modifier les parents de l'état à l'aide de rappels et de le transmettre à l'aide des accessoires

OriginalL'auteur pwolaq

Une autre façon de le faire est:

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

Si vous devez passer des enfants:

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

Si vous faites comme cela, alors vous pouvez accéder à vos accessoires de valeurs directement par this.props.docs en Composant Enfant:

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

OriginalL'auteur Mayank Shukla

Une autre manière de faire sera

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

Tandis que dans le composant enfant, vous pouvez accéder à docs à l'aide de

this.props.docs

Espère que cela aide!

OriginalL'auteur lavee_singh

Vous devez vous connecter pour publier un commentaire.