如何在React组件中使用switch语句？

Question

我有一个React组件，并且在该组件的render方法内部有这样的东西：

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

           { switch(...) {} }

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

现在的要点是，我有两个固定的div元素，一个在顶部，一个在底部。在中间，我想有一个switch语句，根据状态下的值，我想渲染一个不同的组件。因此，基本上，我希望两个div元素始终固定，并且每次都在中间以呈现不同的组件。我正在使用它来实现多步付款程序）。但是，正如当前的代码一样，它不起作用，因为它给了我一个错误，说这switch是意外的。有什么想法可以实现我想要的吗？

Answer 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>

  );

}