下面是一个使用按钮在组件之间切换的完整工作示例

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

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

}

正如你所看到的，我正在使用一个按钮来切换状态。

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

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

  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>

我不太喜欢当前的任何答案，因为它们要么太啰嗦，要么需要您在代码中跳跃才能理解发生了什么。

我更喜欢用一个更以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>

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

React组件中的Switch-Case语句可以如下使用:

<div  id="time-list">
{   
    (() => {
        switch (groupByFilterId) {
            case 0:/*Case 0 */
                return (
                    <div>Case 0</div>
                )
               break;
           case 1: /*Case 1 */
           return ( 
            <div>Case 1</div>
            )
            break;
           case 2:/*Case 2 */
           return ( 
            <div>Case 2</div>
            )
            break;
        }
     })()}

      
       
    
    </div>

改进了一点 马特·韦的回答。

export const Switch = ({ test, children }) => { const defaultResult = children.find((child) => child.props.default) || null; const result = children.find((child) => child.props.value === test); return result || defaultResult; }; export const Case = ({ children }) => children; const color = getColorFromTheMostComplexFnEver(); <Switch test={color}> <Case value="Green">Forest</Case> <Case value="Red">Blood</Case> <Case default>Predator</Case> </Switch> <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>