react.jsで条件が真である場合にのみ小道具を送信

Question

私はいくつかのプロジェクトでReact.jsを使用していますが、条件が真である場合にのみ小道具を送ろうとしています。私は望ましくないものはです値や空のものを、次の例のように（またはthis question）：

render: function(){ 

    ... 

    return (
     <SomeComponent 
      {if(foo === true) prop1="value"} 
     /> 
    ); 
} 

：私は条件は、このような何かtrueの場合、全体の小道具（だけではなく、その値を）送りたい

return (
    <SomeComponent 
     prop1={foo === true ? "value" : null} 
    /> 
); 

私も試しました

... 

    var prop1; 
    if(foo === true) prop1 = "prop1='value'"; 

    return <SomeComponent {prop1} />; 

そしてもちろん、私はUnexpected tokenエラーを得たすべての場合において

... 

    return (
     </SomeComponent 
      {foo === true ? prop1="value" : ""} 
     /> 
    ); 

のようなもの、私が探してきたが、私は何も見つかっていない、反応にそれをする方法はありますか？

ありがとうございました。

Answer 1

目的だかわからないが - ES6は、演算子を広げると、あなたはこのようにそれを行うことができます：あなたは未定義の値を送信する場合でも、まあ

const props = {}; 

if (foo === true) { // or just if (foo) { 
    props.prop1 = 'value'; 
} 

<SomeComponent 
    { ...props } /> 

Answer 2

、あなたは常に検証する チャンスがあります2つの関数のいずれかで：最初の負荷に対するcomponentWillMount 又は第負荷後componentWillReceiveProps。 さらに、レンダリングの機能を有効にすることができます。しかし、あなたが試みているアプローチに応じて私が と答えるならば。

render : function(){ 
if(foo === true) 
    return <SomeComponent prop1 ="value1" />; 
else 
    return <SomeComponent />; 
} 

そして、あなたはあなたがあなたの第二のケースを される任意の小道具の値を渡していない場合は、デフォルト値を設定するgetDefaultProps機能 を使用することができ、レンダリングコンポーネントインチあなたは未定義の値を持つプロパティを渡す場合