反应使用状态以显示否则隐藏

Question

我在反应中使用的状态是：

{this.state.showorhide &&
    <MyComponent />
}

此刻它将显示它是否被隐藏。

如何在showorhide已经为真的情况下添加一个隐藏该条件的条件？

Answer 1

签出

constructor(props) {
    super(props);
    this.state = {
        showorhide: false
    };
}

render() {
    const { showorhide } = this.state;
    return (
        { showorhide ? <MyComponent /> : <HideComponent /> }
    );
}

Answer 2

您可以使用ternary运算符以类似if / else的逻辑进行渲染。

render() {
    const { showorhide } = this.state;
    return (
        { showorhide ? <TrueComponent /> : <FalseComponent /> }
    );
}

Answer 3

一个简单的把戏

{!this.state.showorhide && <MyComponent />}