React弾枠Toastポップアップページなどの簡単な実装案(百達通)

まず、巨牛巨牛の人工知能のチュートリアルを共有します.私が何気なく発見しました.教程は基础がゼロなだけではなくて、分かりやすくて、その上とても面白くてユーモアがあって、また时々内包の下ネタがあって、小说を読むように、はは～私は勉强している中で、とても牛だと感じて、だからみんなに分かち合います!ここをクリックするとチュートリアルにジャンプできます
               
まず使い方を話します

Helper.modal('  ', 'z-index  ');

コードを見て

// modal             modal(Component, zIndex) {        let body = document.body;        let showDom = document.createElement("div");        //               showDom.style.position = 'absolute';        showDom.style.top = '0px';        showDom.style.left = '0px';        showDom.style.width = Browser.width;        showDom.style.height = Browser.height;        showDom.style.zIndex = zIndex || Browser.FLOAT_VIEW_INDEX;        body.appendChild(showDom);        //                let close = () => {            ReactDom.unmountComponentAtNode(showDom);            body.removeChild(showDom);        }        ReactDom.render(            <Component onClose={close} />,            showDom        );    }

これ以上簡潔に書くことはほとんどないと思います.
私の考えは簡単です.
まず、コンポーネントの表示と非表示を制御することで弾枠の効果を達成するのではなく、関数で呼び出すことを望んでいます.
次に、弾枠は自分で自分を閉じる能力があり、簡単な隠すのではなく、本当の意味で自分を除去しなければならない.
以上のような特徴がありますが、もちろん、これは適当な方法だと思います.React 16を通じて、フェイスブックはReactにダイナミックにコンポーネントを挿入する能力を持たせることができると思います.
PS:私は前にantdの実装案を見たことがありますが、1つのToastのために3つのコンポーネントを書いて、容器+通知->Toast、つまり3つのコンポーネントを書いて、正直に言うと、私は雲の中の霧の中を見て、しかも私は少し複雑だと思います.そして、いくつかの限界があるようです(実は私は理解していません..自分のIQを嘲笑しています).
人工知能チュートリアルの参照