React中简单开关盒的逻辑

Question

我需要根据标志值更改显示的组件。 0等于null，但1和2将生成相同的组件但具有不同的自定义消息。

我尝试拼凑开关，但我没有得到任何控制台输出。

switch (flagValue) {
            case 1: 
                console.log('1')
                break;
            case 2:
                console.log('2 or 5')
                break;
            default:
                break;
        } 

我可能会离开这里^^

这是我正在尝试切换案例的代码。 <AlertBox>组件的含量将根据case:1或case:2而变化

if (flagValue !== 0) {
            return null;
        } else
            return (
                <AlertBox
                    title={`Your ${
                        this.props.Year
                    } Payment Has Not Been Processed`}
                    content={
                        <span>
                            custom text here
                            <b>
                                {` ${this.props.month}`} 15,{' '}
                                {`${this.props.currentYear}`}{' '}
                            </b>
                        </span>
                    }
                    headerLevel={2}
                />
            ); 

Answer 1

如果您只显式想要值1和2，那么您可以使用简单的条件渲染。请注意，一旦添加更多案例，这可能会变得非常难看。

return (
    <AlertBox
        title={`Your ${
            this.props.Year
            } Payment Has Not Been Processed`}
        content={
            <span>
                {flagValue === 1 && 'Custom Message 1'}
                {flagValue === 2 && 'Custom Message 2'}
                <b>
                    {` ${this.props.month}`} 15,{' '}
                    {`${this.props.currentYear}`}{' '}
                </b>
            </span>
        }
        headerLevel={2}
    />
);

Answer 2

你检查flagValue是一个数字而不是字符串吗？ Switch语句使用严格相等的===。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

Answer 3

只需编写一个动态返回所选组件的函数：

state ={
    selected : 0,
}

clickHandler = () => this.setState({selected : Math.random(0,numOfcomponents)})     

getSelectedComponent = () =>{
    switch(this.state.selected){
        case 0 : return (<div>0</div>)
        /*..... all possible values*/

        default : return (<div>default</div>)
    }
}

render(){
    <div onClick={this.clickHandler}>{this.getSelectedComponent()}</div>
}

现在，每当用户点击div时，将选择另一个随机组件，只需实现逻辑，然后再进行更改