const [route, setRoute] = useState(INITIAL_ROUTE)

  return (
    <RouteContext.Provider value={{ route, setRoute }}>
      {(() => {
        switch (route) {
          case Route.Home:
            return <PopupHomePage />
          case Route.App:
            return <PopupAppPage />
          default:
            return null
        }
      })()}
    </RouteContext.Provider>

试试这个，它也更干净:在一个函数中获得渲染的开关，并调用它传递你想要的参数。例如:

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/>。这个组件的任务是获取一个道具，并且只呈现子道具与该道具匹配的子元素。所以在下面的例子中，我在开关上创建了一个测试道具，并将其与子节点上的值道具进行比较，只渲染匹配的值道具。

例子:

const Switch = props => { const { test, children } = props // filter out only children with a matching prop 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>

您可以根据自己的需要进行简单或复杂的切换。不要忘记对子节点及其值道具执行更健壮的检查。

我在render()方法中做了这个:

  render() {
    const project = () => {
      switch(this.projectName) {

        case "one":   return <ComponentA />;
        case "two":   return <ComponentB />;
        case "three": return <ComponentC />;
        case "four":  return <ComponentD />;

        default:      return <h1>No project match</h1>
      }
    }

    return (
      <div>{ project() }</div>
    )
  }

我试图保持render()返回干净，所以我把我的逻辑放在一个'const'函数上面。这样我也可以缩进我的开关盒整齐。

我知道我有点晚了，但我认为这个实现可能会有所帮助

您可以使用条件操作符来呈现组件

如果你有下面的switch语句

switch(value) {
    case CASE1:
        return <Case1Component/>

    case CASE2:
        return <Case2Component/>

    case CASE3:
        return <Case3Component/>

    default:
        return <DefaultComponent/>
}

你可以像这样把它转换成react组件

const cases = [CASE0, CASE1, CASE2]
// Reminds me of 'react-router-dom'
return (
    <div>
        {value === cases[0] && <Case0Component/>}
        {value === cases[1] && <Case1Component/>}
        {value === cases[2] && <Case2Component/>}
        {!cases.includes(value) && <DefaultComponent/>}
    </div>
)

你不能在渲染中有开关。放置访问一个元素的对象文字的伪切换方法并不理想，因为它会导致所有视图都要处理，并且可能导致在该状态下不存在的道具的依赖错误。

这里有一个很好的干净的方法来做到这一点，不需要每个视图提前渲染:

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函数封装条件是分离条件逻辑和清理呈现的好方法。