[解決済み】Reactコンポーネント内でswitchステートメントを使用するには？

質問

Reactコンポーネントがあり、その中の render というメソッドがあり、このようなものがあります。

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

           { switch(...) {} }

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

さて、ポイントは、2つの div 要素で、上下にひとつずつ、固定されています。真ん中にswitch文があり、stateの値に応じて別のコンポーネントをレンダリングしたい。つまり、基本的には、2つの div 要素は常に固定で、真ん中だけ毎回違うコンポーネントをレンダリングするようにします。これを利用して、多段階の支払い手続きを実装しています）。しかし、現在のコードのままでは、次のようなエラーが発生し、うまくいきません。 switch が予想外です。私が望むことを達成するために何かアイデアはありますか？

解決方法を教えてください。

この方法を試してみてください。レンダリングのスイッチを関数で取り出し、必要なパラメータを渡して呼び出すだけです。たとえば、次のようになります。

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