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

Stack Overflow用户

提问于 2020-03-06 14:48:44

回答 2查看 205关注 0票数 1

我在角落里有一个带有关闭按钮的组件。我见过很多很棒的例子，如何在父组件中使用条件呈现来显示和隐藏组件

parent.render (<>
...
{ this.displayState? <MyComponent/> : null }
...
</>)

我意识到有多种方法可以解决这个问题，但这不是这篇文章的主题。我可以使用这种方法从父级切换状态，但是如何从组件内部切换显示/可见性状态呢？即点击它的关闭按钮？我必须向组件传递一个属性才能从它内部访问父displayState变量吗？这看起来很麻烦。

这在JQuery和Dom中是不需要动脑筋的，但我想知道react的方法。

谢谢

javascript

reactjs

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 2

Stack Overflow用户

发布于 2020-03-06 14:53:29

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

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

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

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

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

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

票数 1

Stack Overflow用户

发布于 2020-03-06 14:54:10

设置组件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>
  )
}