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

您无法在渲染中进行切换。放置访问一个元素的对象文字的伪切换方法不是理想的，因为它会导致处理所有视图，并可能导致该状态下不存在的prop的依赖项错误。

这是一种很好的干净方法，不需要预先渲染每个视图：

render () {
  const viewState = this.getViewState();

  return (
    <div>
      {viewState === ViewState.NO_RESULTS && this.renderNoResults()}
      {viewState === ViewState.LIST_RESULTS && this.renderResults()}
      {viewState === ViewState.SUCCESS_DONE && this.renderCompleted()}
    </div>
  )

如果视图状态的条件不仅仅基于简单的属性（例如每行多个条件），则枚举和getViewState封装条件的函数是分离此条件逻辑并清理渲染的好方法。

这是一个完整的工作示例，使用按钮在组件之间进行切换

您可以按照以下方式设置构造函数

constructor(props)
{
    super(props);
    this.state={
        currentView: ''
    }
}

然后您可以按以下方式渲染组件

  render() 
{
    const switchView = () => {

    switch(this.state.currentView) 
    {

      case "settings":   return <h2>settings</h2>;
      case "dashboard":   return <h2>dashboard</h2>;

      default:      return <h2>dashboard</h2>
    }
  }

    return (

       <div>

            <button onClick={(e) => this.setState({currentView: "settings"})}>settings</button>
            <button onClick={(e) => this.setState({currentView: "dashboard"})}>dashboard</button>

            <div className="container">
                { switchView() }
            </div>


        </div>
    );
}

}

如您所见，我正在使用按钮在状态之间进行切换。

我不太喜欢当前的任何答案，因为它们要么太冗长，要么要求您跳过代码以了解正在发生的事情。为什么不创建一个非常简单的开关组件，该组件根据prop测试有条件地进行渲染？例如：

const Switch = props => {
  const { test, children } = props
  return children.find(child => {
    return child.props.value === test
  })      
}

const Sample = props => {
  const someTest = true
  return (
    <Switch test={someTest}>
      <div value={false}>Will display if someTest is false</div>
      <div value={true}>Will display if someTest is true</div>
    </Switch>
  )
}

ReactDOM.render(
  <Sample/>,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

您可以根据需要使开关简单或复杂。不要忘记对孩子及其价值道具进行更强大的检查。

一种使用条件运算符表示渲染块中的​​开关情况的方式：

{this.props.someVar == 1 &&
    <SomeContent/>
|| this.props.someVar == 2 &&
    <SomeOtherContent />
|| this.props.someOtherVar == 1 &&
    <YetSomeOtherContent />
||
    <SomeDefaultContent />
}

我建议添加一些括号以确保预期结果，除非掌握运算符的优先级...

lenkan的答案是一个很好的解决方案。

<div>
  {{ beep: <div>Beep</div>,
     boop: <div>Boop</div>
  }[greeting]}
</div>

如果您需要一个默认值，那么您甚至可以

<div>
  {{ beep: <div>Beep</div>,
     boop: <div>Boop</div>
  }[greeting] || <div>Hello world</div>}
</div>

或者，如果那对您来说不太好，那么您可以执行类似的操作

<div>
  { 
    rswitch(greeting, {
      beep: <div>Beep</div>,
      boop: <div>Boop</div>,
      default: <div>Hello world</div>
    }) 
  }
</div>

与

function rswitch (param, cases) {
  if (cases[param]) {
    return cases[param]
  } else {
    return cases.default
  }
}