Reactjs 反应模态动态添加模态

我使用react模态作为模态弹出窗口。（）

但我不希望组件启动时进行静态渲染

render(){
    return(
        <TestPopup/> // I don't want it
    )
}

render（）{
返回(
//我不想要它
)
}

我想在点击按钮时显示模态

所以我试试这个

onClick=()=>{
    const body = document.getElementById('login');  
    const pop = (<TestPopup></TestPopup>);
    ReactDOM.render(pop, body);
}

render(){
    return(
        <button onClick={this.onClick}>call popup</button>
    )       
}

onClick=（）=>{
const body=document.getElementById（'login'）；
常数pop=（）；
render（pop，body）；
}
render（）{
返回(
呼叫弹出窗口
)       
}

当我点击“呼叫弹出”按钮时，弹出窗口出现，但与“呼叫弹出”按钮相同的其他组件消失，并且在我关闭模式时不会返回

如果出现模式，则显示F12时只有

Main.js

class PgmTest extends Component{    
  constructor(props){
    super(props)    
  }    
    
  onClick = () => {
    const body = document.getElementById('login');
    const aa = (<ExampleApp pgm="TEST001" nam="TEST_POP"></ExampleApp>);
    ReactDOM.render(aa, body);
  }
  render(){
    return (
        <div>
        ....
        </div>
        ....
        <button onClick={this.onClick}>call popup</button>
    );
  }
};

export default PgmTest;

类PgmTest扩展组件{
建造师（道具）{
超级（道具）
}    
onClick=（）=>{
const body=document.getElementById（'login'）；
常数aa=（）；
ReactDOM.render（aa，body）；
}
render（）{
返回(
....
....
呼叫弹出窗口
);
}
};
导出默认PgmTest；

TestPopup.js是

const customStyles = {
    content : {
      position              : 'absolute',
      top                   : '45%', //
      left                  : '50%',
      right                 : '100px', // auto
      bottom                : '10px',
      marginRight           : '-10%',
      transform             : 'translate(-50%, -50%)',
      height                : '500px',

    },
    overlay: {zIndex: 1000}
  };
  
export class ExampleApp extends React.Component {    
    constructor (props) {
      super(props);
      this.state = {
        showModal: true
      };
      
      this.handleOpenModal = this.handleOpenModal.bind(this);
      this.handleCloseModal = this.handleCloseModal.bind(this);
    }

    handleOpenModal = () => {
      this.setState({ showModal: true });
    }
    
    handleCloseModal = () => {
      this.setState({ showModal: false });
    }

    render () {
      return (
        <div>            
        <ReactModal 
          style={customStyles}
          isOpen={this.state.showModal}
          contentLabel="Minimal Modal Example"
          ariaHideApp={false}
        >
        <button onClick={this.handleCloseModal}>Close Modal</button>
        </ReactModal>
        </div>
      );
    }
  }

const customStyles={
内容：{
位置：'绝对'，
排名前45%//
左：50%，
右：“100px”，//自动
底部：“10px”，
利润率：'-10%'，
转换：“转换（-50%，-50%）”，
高度：“500px”，
},
覆盖：{zIndex:1000}
};
导出类ExampleApp扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
showModal：对
};
this.handleOpenModal=this.handleOpenModal.bind（this）；
this.handleCloseModal=this.handleCloseModal.bind（this）；
}
handleOpenModal=（）=>{
this.setState（{showmodel:true}）；
}
handleCloseModal=（）=>{
this.setState（{showmodel:false}）；
}
渲染（）{
返回(
闭合模态
);
}
}

我该怎么办