在另一个组件内的主体上渲染组件

时间:2016-07-25 10:50:59

标签: reactjs components render document-body

我希望在渲染时将一个组件渲染到body或任何其他div,在另一个组件内。

我的代码如下:

var React = require('react');
var ReactDOM = require('react-dom');
import PopupSmall from './PopupSmall.js';

class SwitchAccount extends React.Component{

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

    changeAccount(e){
        if(!this.state.showPopup){
            this.setState({showPopup:true});
        }
    }

    popupChange(){
        this.setState({showPopup:false});
        this.props.onChangeAccount();
    }

    render(){

        var popupView;
        if(this.state.showPopup){
            popupView = <PopupSmall popupCallBack={this.popupChange.bind(this)} itemList={this.props.agencies} />
        }

        return (
            <a href="javascript:;" onClick={this.changeAccount.bind(this)}>
                <i className="fa fa-plus-circle"></i>
                <span>  Switch Account</span>

                //so here i need to render popupview component on body.
                // {PopupView, document.getElementById('modal')} or on document.body like so
                // how can i do it here
            </a>
        )
    }
}
export default SwitchAccount;

在上面的代码中,有一个popupView var引用PopupSmall Component,我想将这个组件呈现给body。我怎么能完成这个任务。

帮帮我吧!

0 个答案:

没有答案