将模态组件集成到Load React JS的页面上

Question

我有使用React JS的网页。站点的结构为MainContent.js-> Main.js-> ReactDOM渲染。我想在页面打开时出现模式弹出窗口，以便构建模式组件Modal.js-> DashModal.js，该组件可在其自己的项目上工作，但在导入到我的网站时无法使用。

我如何正确导入它，以使其在加载时像在其自己的项目中一样具有模式弹出窗口？谢谢。我在下面提供了代码。

**Index JS**
import React from "react";
import ReactDOM from "react-dom";
import Main from "./containers/Main";
import { CookiesProvider } from "react-cookie";
import DashModal from "./components/DashModal"

// Import main sass file to apply global styles
import "./static/sass/style.scss";



ReactDOM.render(
    <CookiesProvider>
            <Main />

    </CookiesProvider>,
    document.getElementById("app")
    );

**DashModal.js - the modal component** 

import React from 'react'
import ReactDOM from 'react-dom'
import Modal from "../components/modal"
import "../components/modal.css"
import AppStore from "../static/images/AppLogoBlue.png";


class DashModal extends React.Component { 

    constructor(props) {
        super(props)
        this.state = {show:true}
    }

showModal = () => {
    this.setState({show: true});
};

hideModal = () => {
    this.setState({show:false});
};
render() {
    return(
        <main>
         <h1> React Modal </h1>
        <Modal show = {this.state.show} handleClose ={this.hideModal}>

           <div className = "left">
              <a>
             <img src={AppStore} alt= ""></img>
              </a>
    </div>

              <div className = "left">
                 <button className= "button" onClick={this.hideModal}>Regular site </button>
              </div>



            </div>



        </Modal>
        <button type = "button" onClick = {this.showModal}>
            open
        </button>
       </main>
    );
}

}

const container = document.createElement("div");
document.body.appendChild(container);
ReactDOM.render(<DashModal/>, container);

export default DashModal;

**modal.js- part of modal which goes into DashModal.js**
import React from 'react';
import "./modal.css"



    const Modal = ({ handleClose, show, children}) => {

    const showHideClassName = show? "modal display-block" : "modal display-none"

    return(
        <div className={showHideClassName}>
            <section style={ModalBox} className= "modal-main">
            {children}
            <button onClick={handleClose}>close</button>
            </section>

        </div>

    );

    };
export default Modal; 

提前感谢

Answer 1

据我所知，当<DashModal />导入到另一个组件中时，默认情况下要打开模式。

您可以将道具show={true|false}传递给DashModal组件<DashModal show={true} />，并在该组件内添加componentDidMount生命周期方法

componentDidMount = () =>{
    const {show} = this.props;
    if(show){
       this.showModal()
    }
}

这将检查道具并在加载组件时调用showModal。