JSX 的 React 条件渲染

【问题标题】：React conditional rendering of JSXJSX 的 React 条件渲染
【发布时间】：2021-10-11 01:44:14
【问题描述】：

下面的条件渲染样式看起来不错还是可以进一步改进？

<ColumnLayout>
    {
        (stateVar1 === 'AR') && (
            <div>
                if (stateVar2 === '') {
                    <div>
                        <Button id="btn1">Btn1</Button> 
                        <Button id="btn2">Btn2</Button> 
                    </div>
                }
                if (stateVar2 === 'AP') {   
                    <div>
                        <Button id="btn3">Btn3</Button> 
                        <Button id="btn4">Btn4</Button> 
                    </div>
                }   
            </div>
        )
    }
</ColumnLayout>

【问题讨论】：

视情况而定。 stateVar2 是否可以只有这两个值 stateVar1 === 'AR'

标签： reactjs jsx

【解决方案1】：

<ColumnLayout>
    {
        (stateVar1 === 'AR') && (
            <div>
                { (stateVar2 === '') &&
                    <div>
                        <Button id="btn1">Btn1</Button> 
                        <Button id="btn2">Btn2</Button> 
                    </div>
                }
                { (stateVar2 === 'AP')  &&    
                    <div>
                        <Button id="btn3">Btn3</Button> 
                        <Button id="btn4">Btn4</Button> 
                    </div>
                }   
            </div>
        )
    }
</ColumnLayout>

【讨论】：

谢谢...最后一个问题...如果我想检查 null 或空值...我可以这样做吗 (stateVar2 === '' || staveVar2 === null )
您可以使用 (!stateVar2) 进行检查；这对于 null、undefined、0、"" 等返回 true。