反应条件渲染模式

我已经实现了一个模态组件,在屏幕上显示模式对话框.通常,模态将有条件地显示.我可以通过两种方式在render函数中执行此操作:

render(){
    ...
    
        // something in modal
    
}

在Modal组件中,我使用this.props.show为自己添加一个不同的类.如果为false,则会添加display:none来隐藏模态.

另一种方式是这样的:

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

这用于showModal决定是否在渲染中添加模态.

我想弄清楚的是:

这两种方式有什么不同？

其中一个比另一个好吗？

还有另一种方法吗？

编辑:似乎不同的人有不同的偏好.对我来说,我更喜欢@ErikTheDeveloper所说的.显示/隐藏模态的功能应该保留在模态中,当我们不需要显示模态时,我们可以在模态中返回null.

我想也许没有一个答案,哪种方式更好.也许这只是个人选择？

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

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

我不想渲染它,除非它是可见的(第二个例子),但我认为无论如何都不重要.第二个例子现在也有更少的道具,因此Modal组件更简单.