javascript - react :如何有条件地渲染？

我有三个组成部分A，B和C。

我有两个标志showA和showB。


如果ShowA和ShowB为false，则渲染C。
如果ShowA为true，则仅渲染A。
如果showB为true，则仅渲染B。


我该如何实现？

最佳答案

您可以通过不同的方式来实现它。

多次退货

render() {
    const { showA, showB } = this.state;
    if (showA) return <A />
    if (showB) return <B />
    return <C />
}

与'&&'运算符内联

render() {
    const { showA, showB } = this.state;
    return (
        <div>
            {(showA && !showB) && <A />}
            {(showB && !showA) && <B />}
            {(!showA && !showB) && <C />}
        </div>
    )
}

另请参阅：https://reactjs.org/docs/conditional-rendering.html