web-dev-qa-db-ja.com

React（JSX）を使用した構造の場合、elseを記述するにはどうすればよいですか？

私は反応で同等のものを書きたい：

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

しかし、それは過度に複雑に思えます。もっと良い方法はありますか？

javascriptreactjsjsx
10
Henry

なぜあなたは、三項が十分に表現力がないと言いますか？

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

<div>が必要ない場合は、<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>;
  }
}

最後のreturnステートメントをelseブロックから移動することもできます。

一般的に、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>;
}

文を必要とする/使いたいときはいつでもそれをしなければなりません。

6
Felix Kling

値を計算し、変数にバインドしてから、後で出力する方が適切です。複雑なロジックをインラインで（doしたい場合は、&&および||：

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>
  );
}
3
Jacob

あなたの状態があなたが表現したものと同じくらい簡単なら、私はあなたが上記の@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スイッチvs if else

0
KumarM

まだこの問題が発生している場合は、eslintrc.jsファイル。

"no-nested-ternary" : "off"

これにより、jsxコードでネストされた3項の使用を開始できます。

0
Nouman khan

確かに、それは方法ではありません。

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}
0
Hunter