React创建对话框组件的方法实例

class Dialog extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <div className="dialog">
                <div className="title">{this.props.title}</div>
                <div className="content">{this.props.children}</div>
                <div className="button-area">
                    <a onClick={this.props.onClickCancle.bind(this)}   className="btns">取消</a>//这里接收父组件传递过来的关闭对话框的方法
                    <a className="btns btns-blue">确定</a>
                </div>
            </div>
        )
    }
}

class DialogCenter extends Component{
    constructor(props){
        super(props);
    }
    appendToBody() {
        ReactDOM.unstable_renderSubtreeIntoContainer(
            this,
            <Dialog title="this is  a title!" onClickCancle={this.props.onClickCancle.bind(this)}>
                <span>这是内容内容内容</span>
            </Dialog>,
            this.container
        )
    }
    componentDidMount() {
        this.container = document.createElement('div');
        $(this.container).addClass("global-hide");
        document.body.appendChild(this.container);
        this.appendToBody()
    }
    componentDidUpdate() {
        this.appendToBody()
    }
    componentWillUnmount() {
        document.body.removeChild(this.container)
    }
    render(){
        return null;
    }
}

//启动对话框，选择职业，开始考试
class BeginExamComponent extends Component{
    constructor(props){
        super(props);
    }
    //使用函数在render中动态创建组件
    renderDialog(){
        if (this.props.isShow){
            console.log("开始创建对话框组件");
            return(//将关闭对话框的方法传递下去
                <DialogCenter onClickCancle={this.props.onButtonClose.bind(this)}/>
            )
        }else{
            return null;//这里实际上就是所谓的删除组件
        }
    }
    render(){
        return(
            <div className="begin-exam-area">
                <div className="top-tips">点击按钮，请确认信息后开始考试</div>
                <div className="button-wrapper">
                    <button onClick={this.props.onButtonClick.bind(this)}>开始考试</button>//启动对话框的函数
                    <button>模拟考试</button>
                </div>
                {this.renderDialog()}
            </div>
        )
    }
}

export class Home extends Component{

    constructor(){
        super();
        this.state={
           showDialog:false
        }
    }

    showDialog(){
        console.log("调用对话框");
        this.setState({
            showDialog:true
        })
    }

    closeDialog(){
        console.log("卸载对话框");
        this.setState({
            showDialog:false
        })
    }
    render(){
        return(
            <div>
               <HomeHeader avatarUid={this.props.account}/>
                <SearchArea/>
                <BeginExamComponent onButtonClick={this.showDialog.bind(this)} onButtonClose={this.closeDialog.bind(this)} isShow={this.state.showDialog}/>
            </div>
        )
    }
}