javascript - react : How to conditionally render?

Question

我有三个组件 A、B 和 C。

我有两个标志 showA 和 showB。

• 如果 ShowA 和 ShowB 为假，则呈现 C。
• 如果 ShowA 为真，则只渲染 A。
• 如果 showB 为真，则只渲染 B。

我如何实现这一点？

Answer 1

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

多次返回

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