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

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

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时，都会选择另一个随机组件，只需实现在此之后进行更改的逻辑即可

Answer 2

如果仅明确需要值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 3

您是否检查过flagValue是数字而不是字符串？ switch语句使用严格相等===。

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

React中简单开关案例的逻辑

3 个答案: