javascript - react 条件渲染模式

Question

我已经实现了一个模态组件，它在屏幕上显示一个模态对话框。通常模式会有条件地显示。我可以通过两种方法在渲染函数中执行此操作:

render(){
    ...
    <Modal show={this.state.showModal}>
        // something in modal
    </Modal>
}

在模态组件中，我使用 this.props.show 为其自身添加一个不同的类。当此值为 false 时，它​​将添加一个 display:none 来隐藏模式。

另一种方法是这样的:

render(){
    ...
    { this.state.showModal &&
        (<Modal>
            // something in modal
        </Modal>)
    }
}

这使用 showModal 来决定是否在渲染中添加 Modal。

我想弄清楚的是:

1. 这两种方式有什么不同？
2. 其中一个比另一个更好吗？
3. 还有其他方法可以做到这一点吗？

编辑:似乎不同的人有不同的偏好。对于我自己来说，我更喜欢@ErikTheDeveloper 所说的。显示/隐藏Modal的能力应该保留在Modal内部，当我们不需要显示Modal时，我们可以在Modal中返回null。

我认为对于哪种方式更好可能没有确定的答案。也许这只是个人选择？

Answer 1

您的第一个示例始终呈现模式，但使用 CSS 隐藏/显示它。

您的第二个示例仅在显示时将模态插入到 DOM 中，否则它根本不会显示在 DOM 中。

我宁愿不渲染它，除非它是可见的(第二个例子)，但我认为这两种方式都不重要。第二个示例现在的 props 也更少，因此 Modal 组件更简单。