どのように私は（JSX）と反応用いた構造ならば、他の書くことができます - 三元は十分

Question

私が反応に相当するものを書きたいの表現ではありません。

if (this.props.conditionA) { 
    <span>Condition A</span> 
} else if (this.props.conditionB) { 
    <span>Condition B</span> 
} else { 
    <span>Neither</span> 
} 

ので、多分

render() { 
    return (<div> 
     {(function(){ 
      if (this.props.conditionA) { 
       return <span>Condition A</span> 
      } else if (this.props.conditionB) { 
       return <span>Condition B</span> 
      } else { 
       return <span>Neither</span> 
      } 
     }).call(this)} 
    </div>) 
} 

しかし、あまりにも複雑です。より良い方法がありますか？

Answer 1

なぜ三者が十分に表現力がないと言いますか？

render() { 
    return <span> 
    {this.props.conditionA ? "Condition A" 
     : this.props.conditionB ? "Condition B" 
     : "Neither"} 
    </span>; 
} 

Answer 2

実際、それは方法ではありません。あなたが<div>を必要としない場合

var element; 
if (this.props.conditionA) { 
    element = (<span>Condition A</span>) 
} else if (this.props.conditionB) { 
    element = (<span>Condition B</span>) 
} else { 
    element = (<span>Neither</span>) 
} 
... 
    {element} 

Answer 3

、ちょうど<span>の要素を返す：

render() { 
    if (this.props.conditionA) { 
    return <span>Condition A</span>; 
    } else if (this.props.conditionB) { 
    return <span>Condition B</span>; 
    } else { 
    return <span>Neither</span>; 
    } 
} 

は、あなたもelseブロックのうち、最後のreturn文を移動することができます。

---

通常、JSX内にすべてを埋め込む必要はありません。

render() { 
    let content; 
    if (this.props.conditionA) { 
    content = <span>Condition A</span>; 
    } else if (this.props.conditionB) { 
    content = <span>Condition B</span>; 
    } else { 
    content = <span>Neither</span>; 
    } 

    return <div>{content}</div>; 
} 

ステートメントを使用する必要があるときはいつでも、そうしたいときはいつでも、値を計算するのはまったく問題ありません。

Answer 4

値を計算し、変数にバインドして、後で出力する方が良いです。あなたはは、複雑なロジックをインラインたい場合は、&&と||を使用することができます。

render() { 
    return (<div> 
     { 
      this.props.conditionA && <span>Condition A</span> 
      || this.props.conditionB && <span>Condition B</span> 
      || <span>Neither</span> 
     } 
    </div>) 
} 

編集：

他の人が指摘したように、あなたもそのラッピングのdivを削除しても、このアプローチを使用することができます。

render() { 
    return (
    this.props.conditionA && <span>Condition A</span> 
    || this.props.conditionB && <span>Condition B</span> 
    || <span>Neither</span> 
); 
} 

Answer 5

あなたの状態はあなたが表現するもののように単純であれば、私は@SkinnyJは前述したように、あなたはまだ三項を使用することができると思います。かなりエレガントですが、これらの条件が多い場合は心配しています。この問題を解決するもう1つの方法があります：switchステートメントの使用。

const props = { 
    conditionA: "this is condition a" 
}; 

let value; 

switch (Object.keys(props)[0]) { 
    case "conditionA": 
    value = "Condition A"; 
    break; 
    case "conditionB": 
    value = "Condition B"; 
    break; 
    default: 
    value = "Neither"; 
} 

console.log(value); 

ここではいくつか前提があります。オブジェクトはnullではなく、プロパティは1つだけです。

しかし、そういったシナリオの場合、スイッチがより効率的になる可能性があります。これはあなたのための参考になります。

Javascript switch vs if else