web-dev-qa-db-ja.com

「&&」演算子は{this.props.children && React.cloneElement（this.props.children、{foo：this.foo}）で何を示しているか

反応ルータを使用してレンダリングされる反応クラスがあります。 React.cloneElementを使用して親から子に要素を渡すことを理解しています。しかし、「&&」演算子がこの種のステートメントを使用する理由/理由：

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

ここで「&&」演算子を使用する理由を理解したいと思います。

reactjsreact-nativereact-router
7
Arathi Arumugam

短絡評価

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

そして、それは以下の略記です：

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

&&は、次のようなJavaScript式で見られるのとまったく同じ演算子です...

if( condition1 && condition2) {

}

形の表現がJavaScriptの特徴です...

(condition1 && condition2)

condition1がtrueの場合はcondition2に評価され、condition1がfalseの場合はnullに評価されます。それは効果的に省略形です...

if(condition1) {
    condition2;
}

React要素を条件2として配置することにより、この短縮形を使用します...

(condition1 && <ReactElement />)

これは事実上...

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

&&と||の場合このように使用されるため、「短絡演算子」と呼ばれます。この使用法では、「もしも（何かが本当なら）」と簡単に考えることができます。したがって、this.props.childrenがnullでない場合、React.cloneElementを呼び出します。 nullの場合、React.cloneElementは呼び出されません。

これは公式のReactドキュメントのリンクであり、さらに読むには https://facebook.github.io/react/docs/conditional-rendering.html#inline-if -with-logical-ampamp-operator

6
Jeff McCloud

簡単に言えば、その&&の目的は次のとおりです。

子がいないときに子を複製してレンダリングしようとしないでください。

したがって、Usersを次のように使用すると、

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

次に、Child1とChild2の両方が追加の小道具fooでレンダリングされます。

ただし、親が<Users/>または<Users></Users>のように使用されている場合、レンダリングする子コンポーネントはありません。したがって、React.cloneElementを呼び出す前にチェックを実行しています。

&&はブール値AND：1 AND A === A => 1 && A = Aと同等

||はブール値OR：1 OR A = 1 => 1 || A = 1と同等

2
Yadhu Kiran

最初の句を削除してReact.cloneElement(this.props.children, {foo:this.foo})を使用することもできますが、これは、レンダリングする子コンポーネントがない場合を考慮して、例に含まれています。

0
Conan