Javascript Reactjs创建可重用的自定义模式

我正在尝试使模式可重用：

这是我的组件：

class OverleyModal extends Component {

  constructor(props) {
    super(props);
  }

  openModal = () => {
     document.getElementById("myOverlay").style.display = "block";
  }

  closeModal = () => {
    document.getElementById("myOverlay").style.display = "none";
  }



  render() {
    return (

    <React.Fragment>
        <div id="myOverlay" className="overlay">
            <div className="overlay-content">
                <p>content goes there</p>
            </div>
        </div>
    </React.Fragment>

    )
  }
}

export default OverleyModal;

class-overleymodel扩展组件{
建造师（道具）{
超级（道具）；
}
OpenModel=（）=>{
document.getElementById（“myOverlay”）.style.display=“block”；
}
closeModal=（）=>{
document.getElementById（“myOverlay”）.style.display=“无”；
}
render（）{
返回(
内容就在那里

)
}
}
导出默认模式；

上面的组件对于modal来说工作得很好，这就是为什么我没有在这里包括CSS/style，这个问题与CSS无关

我想，当我在任何组件上安装此组件时，如下图所示：

<overleyModal open={true} />

如果open=true，则模式将可见

<overleyModal open={false} />

如果open={false} 模态将消失

您可以看到我如何在组件方法

openModal（）

和

closeModal（）中处理打开和关闭模式

但是我正在努力使它可靠，我只想用
open
作为道具，而不是别的。如果open为true，它将出现；如果为false，它将消失

在这种情况下，有人能帮我吗？
你需要使用道具，通过有条件地渲染来控制打开和关闭。您还可以通过将内容作为道具传递，使其成为通用内容

class OverlayModal extends Component {
  render() {
    const { open, content } = this.props
    return open? <React.Fragment>
        <div id="myOverlay" className="overlay">
            <div className="overlay-content">
                <p>{content}</p>
            </div>
        </div>
    </React.Fragment>: null
  }
}

export default OverlayModal;

类覆盖扩展组件{
render（）{
const{open，content}=this.props
还开着吗？
{content}

：null
}
}
导出默认覆盖；

像这样使用它

<OverlayModal open={true} content={content goes there'} />

open
可以是属性值，并且可以基于属性值有条件地呈现模态。不需要直接访问dom元素

return props.open ? (
  <div id="myOverlay" className="overlay">
    <div className="overlay-content">
      <p>content goes there</p>
    </div>
  </div>
) : null;

return props.open？(
内容就在那里

)：null；
如果
open
是一个属性，那么您可以简单地使用
…
（或应用适当的类）。但是请注意，您应该在此处使用门户。不，如果我这样做，我无法创建动画。因此，根据道具值，您可以设置一个类名，如
，然后在类中定义显示
<OverlayModal open={true} ><p>content goes there</p></OverlayModal >

return props.open ? (
  <div id="myOverlay" className="overlay">
    <div className="overlay-content">
      <p>content goes there</p>
    </div>
  </div>
) : null;