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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

render() {
    return (
        <div>
            <div>
                // removed for brevity
            </div>
           { switch(...) {} }
            <div>
                // removed for brevity
            </div>
        </div>
    );
}

现在的要点是，我有两个固定的div元素，一个在顶部，一个在底部。在中间，我想有一个switch语句，根据状态下的值，我想渲染一个不同的组件。因此，基本上，我希望两个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>
  );
}

以上是 如何在React组件中使用switch语句？ 的全部内容， 来源链接： utcz.com/qa/433817.html

回到顶部