问如果使用自己的"close“按钮切换组件的可见性，那么"React way”是什么？

EN

可以，您可以传递prop，当您单击close按钮时，它将成为处理程序。在React中有受控组件(由其父组件控制的组件)和非受控组件(处理自己的所有状态，但可以通过道具从其父组件获取初始值)的概念。将两者混合在一起通常是不好的做法，因为它可能会变得很难管理。传递属性处理程序以关闭组件将是构建受控组件的一个示例，由此显示状态由父组件管理。您还可以将其构建为一个不受控制的组件，该组件将从父级获取其初始显示，但随后从父级管理其自身的内部状态。在非受控组件中，您也可以始终传递一个处理程序，如果您希望发生任何其他副作用，则可以调用该处理程序，例如，触发另一个组件显示等。

附注：您可以将{ this.displayState? <MyComponent/> : null }缩写为{this.displayState && <MyComponent/>}

在父级中切换组件via的一个主要区别是，它将对组件执行mount或unmount操作，从而触发相关的生命周期挂钩

而从子组件内部切换将不会安装或卸载子组件

归根结底就是你想要的结果是-

• 完全从DOM中删除，并触发任何卸载逻辑，如清理事件处理程序-使用父对象来卸载子对象，使用&&语法
• 将组件保留在DOM中，但隐藏其内容，您可以从组件本身进行控制，通过CSS或&&语法卸载它的一些子对象，但例如保留根挂载。在这里，CSS可能是首选的，因为它更快，而且如果你不想考虑嵌套子对象的卸载和挂载问题。

设置组件main Div style属性中的display属性。

const Component = props => {
  const [hide, setHide] = useState(false)

  return (
    <div style={{display: hide ? 'hidden' : 'flex'}}> // Flex or any other valid display value
      <CloseButton onClick={() => setHide(true)}
      ...
    </div>
  )
}