web-dev-qa-db-fra.com

Qu'est-ce que l'opérateur '&&' indique avec {this.props.children && React.cloneElement (this.props.children, {foo: this.foo})

J'ai une classe react qui est rendue à l'aide de react router. Je comprends que React.cloneElement est utilisé pour passer des éléments du parent à l'enfant. Mais pourquoi/que fait l'opérateur '&&' avec ce genre de déclaration:

class Users extends React.Component {
    getInitialState() {
      return {
          page:0
        }
     },      
    foo(){
        this.setState({'page':1})
     }
      render() {
        return (
          <div>
            <h2>Users</h2>
            { this.props.children && React.cloneElement(this.props.children, {
    foo:this.foo})
          </div>
        )
      }
    }

Je voudrais comprendre pourquoi utilisons-nous l'opérateur '&&' ici.

reactjsreact-nativereact-router
7
Arathi Arumugam

C'est évaluation de court-circuit

(if this part is true) && (this part will execute)

Et ce raccourci de:

if(condition){
   (this part will execute)
}
20
sadiq

Le && est exactement le même opérateur que vous trouveriez dans n'importe quelle expression javascript, telle que ...

if( condition1 && condition2) {

}

C'est une fonctionnalité de javascript qu'une expression du formulaire ...

(condition1 && condition2)

sera évalué à condition2, si condition1 est vraie, ou null si condition1 est fausse. C'est en fait un raccourci pour ...

if(condition1) {
    condition2;
}

Nous utilisons ce raccourci en plaçant un élément React comme condition 2, obtenant ...

(condition1 && <ReactElement />)

ce qui est effectivement ...

if(condition1) {
    <ReactElement />
}
7
Alex Young

Quand && et || sont utilisés de cette manière, ils sont surnommés "opérateurs de court-circuit". Dans cet usage, il peut être considéré comme un quickie "si (quelque chose est vrai)". Donc, si this.props.children n'est pas nul, il appellera React.cloneElement. S'il est nul, il n'appellera pas React.cloneElement.

Voici un lien sur la documentation officielle React, avec une lecture supplémentaire: https://facebook.github.io/react/docs/conditional-rendering.html#inline-if -avec-opérateur-ampamp-logique

6
Jeff McCloud

En termes simples, le but de cette && est:

N'essayez pas de cloner et de rendre des enfants lorsqu'il n'y a pas d'enfants.

Donc, si vous utilisez Users comme ceci:

<Users>
   <Child1 />
   <Child2 />
</Users>

alors les deux Child1 et Child2 sera rendu avec des accessoires supplémentaires foo.

Mais si le parent est utilisé de cette manière <Users/> ou <Users></Users>, il n'y a aucun composant enfant à rendre. Nous effectuons donc une vérification avant d'invoquer React.cloneElement.

&& est équivalent à booléen AND:1 AND A === A => 1 && A = A

|| est équivalent à booléen OR:1 OR A = 1 => 1 || A = 1

2
Yadhu Kiran

Vous pouvez supprimer cette première clause et simplement utiliser React.cloneElement(this.props.children, {foo:this.foo}), mais elle est incluse dans votre exemple pour prendre en compte les cas où aucun composant enfant ne doit être rendu.

0
Conan