web-dev-qa-db-fra.com

Comment charger des composants conditionnellement dans ReactJS

Il s'agit d'un nouveau démarreur de ReactJS. L'indisponibilité de ressources facilement saisissables m'a incité à frapper à nouveau SO. Le problème est le suivant. J'ai un composant React à savoir, RegisterAccount qui, lorsque vous cliquez dessus, déclenche un autre composant (une fenêtre contextuelle) permettant aux utilisateurs de remplir les détails requis pour enregistrer un compte. Maintenant, lorsqu'un compte est enregistré avec succès, je veux ajouter le compte enregistré en tant que autre composant sous RegisterAccount Comment puis-je configurer cette communication?

//In RegisterAccount
<addAccount/> //pop-up
<accountAdded/> //if account added, then show this component
javascriptreactjs
23
5122014009

Je suis nouveau chez React. Je trouvais aussi comment. et j'ai vu ça article ! Ça dit comme des belows

render : function()
{
    return (
        <div>
        { true && <AddAccount /> }
        { false && <AccountAdded /> }
        </div>
    );
}
27
Yongnam Jeong

Si je comprends bien votre question, vous essayez de mettre à jour le composant à afficher lorsque l'état change (par exemple, l'utilisateur crée un compte), cet état étant modifié par un composant enfant. Voici un exemple de base montrant la communication enfant -> parent.

Dans ce cas, le composant RegisterAccount est un composant racine. S'il s'agissait d'un enfant d'un autre composant (s) qui avait également besoin de connaître l'état hasAccount utilisé dans cet exemple, l'état serait probablement mieux stocké plus haut dans la chaîne (et transmis comme accessoire) .

jsfiddle de cet exemple

/** @jsx React.DOM */

var AddAccount = React.createClass({
  handleRegistration: function() {
    this.props.updateAccount(true);
  },
  render: function() {
    return <a onClick={this.handleRegistration}>Create my account</a>;
  }
});

var AccountAdded = React.createClass({
  render: function() {
    return <span>Account exists now</span>;
  }
});

var RegisterAccount = React.createClass({
  getInitialState: function() {
    return {
      hasAccount: false
    };
  },
  updateAccountStatus: function(status) {
    this.setState({
      hasAccount: status
    });
  },
  render: function() {
    return (
      <div>
        {this.state.hasAccount ? <AccountAdded /> : <AddAccount updateAccount={this.updateAccountStatus} />}
      </div>
    );
  }
});

React.renderComponent(<RegisterAccount />, document.body);
18
Michael LaCroix

Vous pouvez également effectuer les opérations suivantes et selon la propriété condition renvoyer true ou false, vous pouvez effectuer le rendu ou non. Ceci n'est qu'un exemple, la condition pourrait tout aussi bien provenir d'une méthode etc etc:

export class MyClass extends React.Component{
    ...
    render(){
            <div>
                <img src='someSource' />
                {this.state.condition ? <MyElement /> : null}
            </div>
    }
}

vous pouvez également trouver des informations plus détaillées ici .

3
Red fx

Dans votre fonction de rendu, vous pouvez avoir une variable avec votre balise qui est affichée sous condition ... un peu comme ceci:

render: function(){
   var conditionalTag;
   if(conditionalTag)   <AccountAdded/>

   return (
      <AddAccount/>
      { conditionalTag } 
   )

}

conditionalTag ne sera rendu que si la variable contient jsx

2
SamiZ