☰

React コンポーネント内で switch ステートメントを使用するにはどうすればいいですか? 質問する

tag-icon • tag-icon reactjs
React コンポーネント内で switch ステートメントを使用するにはどうすればいいですか? 質問する

React コンポーネントがあり、renderコンポーネントのメソッド内に次のようなものがあります。

render() {
    return (
        <div>
            <div>
                // removed for brevity
            </div>

           { switch(...) {} }

            <div>
                // removed for brevity
            </div>
        </div>
    );
}

divここで重要なのは、上部と下部に 2 つの要素があり、これらは固定されているということです。中央に switch ステートメントを配置し、状態の値に応じて異なるコンポーネントをレンダリングします。つまり、基本的に、2 つのdiv要素は常に固定し、中央でのみ毎回異なるコンポーネントをレンダリングします。これを使用して、複数ステップの支払い手順を実装しています。ただし、現在のコードでは、予期しないエラーが発生して機能しませんswitch。目的を達成する方法について何かアイデアはありますか?

ベストアンサー1

これを試してみてください。これはもっとクリーンです。関数内のレンダリングからスイッチを取得し、必要なパラメータを渡して呼び出すだけです。例:

renderSwitch(param) {
  switch(param) {
    case 'foo':
      return 'bar';
    default:
      return 'foo';
  }
}

render() {
  return (
    <div>
      <div>
          // removed for brevity
      </div>
      {this.renderSwitch(param)}
      <div>
          // removed for brevity
      </div>
    </div>
  );
}

おすすめ記事