16

私は以下のようないくつかのコンポーネントを持っています:

ラッパー: ローダーとページをラップします

ローダー: 一部のアニメーション

ページ: ページ コンテンツ

次のようなコード:

<body>
  <div id="app"></div>
</body>

class Loader extends Component {}

class Page extends Component {}

class Wrapper extends Component {
    render() {
        return (
            <Loader/>
            <Page />
        );
    }
}

ReactDOM.render(<Wrapper />, document.getElementById('app'));

DOM が完全にロードされた後、Loader を非表示にして Page コンポーネントを表示したい。

Reactで dom ready イベントをどのように記述すればよいですか?

jQueryのように:$(window).on('ready')

4

2 に答える 2

17

TL;DR私の理解が正しければ、答えはおそらく「不可能」です。しかし、別の解決策があります...

一連のステップとして説明されている、あなたがやろうとしていると私が思うことは次のとおりです。

  1. ページの読み込みが開始され、<Loader />コンポーネントは「ページの読み込み」アニメーションを表示します

  2. ページの読み込みが終了し、<Loader />コンポーネントが削除 (または非表示) され、<Page />コンポーネントが「実際の」ページ コンテンツとともに挿入 (または表示) されます。

問題は次のとおりです。React コンポーネントを次のようにページに挿入することを思い出してください。

ReactDOM.render(<Wrapper />, document.getElementById('app'));

DOM が読み込まれるまで、React コンポーネントを実際に注入することはできません。したがって、その時点までに、<Loader />約 2 ミリ秒間表示されて消えるか、まったく表示されません (ページに挿入されるまでに DOM が既に読み込まれているため)。

スロバーやその他の単純なアニメーション (アニメーション GIF など) を表示しようとしている場合は、ハイブリッド アプローチを試してみます。

HTML を次のように設定します。

<body>
    <div id="app"><img src="throbber.gif" /></div>
</body>

スクリプト タグに、JQuery の「ドキュメント準備完了」イベント ハンドラーを含めて、React コンポーネントをロードします。

class Page extends Component {}

class Wrapper extends Component {
    render() {
        return (
            <Page />
        );
    }
}

$(document).ready(function () {
    ReactDOM.render(<Wrapper />, document.getElementById('app'));
});

私が省略していることに注意してください<Loader />- throbber イメージはローダーの仕事をしています。

ここでの考え方は、ページが読み込まれている間、DOM が読み込まれるまでスロバー GIF がズキズキし、その時点で JQuery のドキュメント準備完了イベントが発生し、コンテンツdiv#appが置き換えられるということです。

私はこれを試していませんが、Reactが単にコンテンツを追加するのではなく、実際にのコンテンツを置き換えれば、うまくいくはずです。そうでない場合は、ドキュメントの準備が整ったハンドラーを次のように変更するだけです。div#app

$(document).ready(function () {
    $('div#app img').remove();
    ReactDOM.render(<Wrapper />, document.getElementById('app'));
});
于 2016-07-29T04:35:03.967 に答える