Reactjs 制作可重復使用的自定義模態

Question

我正在嘗試使模態可重用：

這是我的組件：

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;

上面的組件非常適合模態，這就是為什么我沒有在這里包含 CSS/樣式，這個問題與 CSS 無關。

我想要，當我將這個組件安裝在下面這樣的任何組件上時：

<overleyModal open={true} />

如果 open=true，模態將是可見的

<overleyModal open={false} />

如果 open={false} 模式將消失

您可以看到我如何在 coponent 方法openModal()和closeModal()中處理打開和關閉模式

但是我正在努力使其可靠，我只想使用open作為道具，沒有別的。 如果 open 為真，它將出現，如果為假，它將消失。

在這種情況下有人可以幫我嗎？

Answer 1

您需要利用道具並通過條件渲染來控制它的打開和關閉。 您也可以通過將內容作為道具傳遞來使內容通用

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;

並像使用它一樣

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

甚至更好的是，您可以將內容定義為子項，以便為您提供更多樣式選項

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

export default OverlayModal;

並用作

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

Answer 2

open可以是一個屬性值，而 modal 可以根據 prop 值有條件地呈現。 無需直接訪問 dom 元素。

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