将状态作为参数传递给 switch

Question

我有多个值要显示在组件中，但一次只能显示 1 个值。所以在这种情况下，valueOne 是真的，我想在 switch 语句中使用它来返回值。我将创建一个div 来显示值。

如何将this.state 中的值作为switch 中的参数传递？

这是正确的方法吗？我不能使用三元运算符，因为我可能有超过 2 个值。我将添加一个回调来关闭可见的 div，并将 this.state 中的该值设为 false，并将该值之后的设为 true 以在 DOM 中列出。但是我该怎么做呢？

import React, { Component } from 'react';

    const one = () => {
        return(
            <div>
                <p> This is One</p>
            </div>
        )
    }

    class Component extends React.Component{
       state = {
         value: 'one'
    }

    renderSelected = () => {
      switch(this.state.value){
        case 'one' : return <div>{one}</div>
        default : return null
      }
    }

    render(){
      return <div className='main'>{this.renderSelected()}</div>
    }
}

export default MyComp;

这里我收到let questOne = {this.state} 的解析错误

Answer 1

将逻辑包装在一个函数中并从render调用它

class Component extends React.Component{
    state = {
        value: 'one'
    }

    renderSelected = () => {
        switch(this.state.value){
            case 'one' : return <div>1</div>
            default : return null
        }
    }

    render(){
        return <div className='main'>{this.renderSelected()}</div>
    }
}