這個(gè)很簡單的！我就簡單寫一下！

import React, { Component } from 'react'; 
// B組件
import ComponentB from './ComponentB';

// A組件 
class ComponentA extends Component {
    constructor(props) {
        super(props);
        this.state = {
            aData: ''
        };
    }
    componentDidMount() {
        // 其他操作
    }
    async openModal() { // 打開彈窗
        const res = await ...; // 利用async await請求數(shù)據(jù)，具體按照自己的
        this.setState({
            aData: res
        });
    }
   
    render() {
        const { aData } = this.state;
        return (
            <div className='my-container'>
                <div onClick={()=>this.openModal()}>打開彈窗</div>
                { aData ? <ComponentB aData={aData} /> : null }
            </div>
        )
    }
}

export default ComponentA;

render函數(shù)中，添加條件判斷，必須得條件滿足之后才進(jìn)行渲染。具體的渲染邏輯中，做好數(shù)據(jù)的兼容性處理（如不存在，或者默認(rèn)值等）

{xxx && xxx.xxx && xxx.xxx.xxx &&
    <div>{xxx.xxx.xxx}</div>
}

使用 lodash 的 get 方法來判斷數(shù)據(jù)是否已經(jīng)存在，可以簡單點(diǎn)。。