Визуализация компонента на теле внутри другого компонента

Question

Я хочу визуализировать один компонент на тело или любой другой 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. Как я мог достичь этой задачи.

Помоги мне!