Question

我对用于渲染/不渲染模态的一些技术有疑问。

目前有两种主要方法。

在第一个示例中，我们在模态上使用了可见的道具，并在此基础上应用了一种将隐藏模态的样式。这将通过状态进行处理，然后使用按钮进行切换，例如：

<Modal
   title="Foo"
   visible={this.state.visible}
 >
   Foo
</Modal>

第二种方法也使用状态，但是使用条件来呈现或不呈现模式：

{this.state.visible && (
   <Modal title="Foo">
      Foo
   </Modal>
)}

与此相关的方便之处在于，只有在应该显示模式之前，模态才会呈现。

那么最好的方法是什么？我想这两个是正确的，但是有一个比另一个更好吗？

Answer 1

个人第二个更好，因为通过检查“父组件”的状态，您可以将“父组件”逻辑和“子组件”逻辑分开，因为“模态”组件仅负责显示模态，但是打开或关闭模态的逻辑属于“父组件”逻辑。但是两种解决方案都可以：）

Answer 2

只需研究UI库文档中的问题：antd，material-ui，semantic-ui。

您会发现答案=>道具（名称已打开，显示，可见等）是控制可见性（组件内部状态）的最佳方法。

例如，您可以看到使用此软件包的antd模态（反应成分/对话框）： https://github.com/react-component/dialog/blob/master/src/Dialog.tsx

您可以返回null或将css（显示：无；用于示例）用于不可见的模态