17

React を使用する既存のプロジェクトで MDL を使用しようとしていますが、いくつかの問題が発生しています。多くの警告メッセージがありますが、最初のロードでは問題ないように見えます。

警告: ReactMount: ルート要素が元のコンテナーから削除されました。新しいコンテナ:

これは、MDL によって認識されるクラスを持つすべての DOM 要素 (例: mdl-layout、mdl-layout__content など) でほとんど発生し、DOM の変更時に発生します。

さらに、ルートを変更すると、「Invariation Violation」エラーが発生します。

キャッチされないエラー: 不変違反: findComponentRoot(..., .0.2.0.1.1.0.0.0.0): 要素が見つかりません。これはおそらく、DOM が予期せず変更されたことを意味します (たとえば、ブラウザーによって)...

これは、MDL と React がほとんど互換性がないということですか?

更新: class="mdl-js-layout" を持つ要素が reactjs レンダリング関数の最上位の要素でない場合、問題はなくなります。その要素をラップしたら、すべて問題ありません。

4

2 に答える 2

9

DIV 要素を外側にラップしてみてください。この方法でその問題を修正しました。

Redux + React + MDL + React-Router を使用している場合、DIV 要素を Provider 要素にラップできます。

import React, { createStore }      from 'react';
import { Provider }                from 'react-redux';
import Router, { HistoryLocation } from 'react-router';

var store = createStore();

Router.run(routes, HistoryLocation, (Handler, state) => {
    React.render((
        <div>
            <Provider store={store}>
            {
                () => <Handler {...state} />
            }
            </Provider>
        </div>
    ), document.body);
});

それがあなたを助けることを願っています:)

于 2015-09-01T10:29:27.983 に答える
6

1 番目と 2 番目のエラーは相互に関連しています 。MDL のレイアウト ソース コードを見てください。mdl-js-layout以下は、React ルート要素 (コンポーネント)の突然変異を引き起こすと言えます。

var container = document.createElement('div');
container.classList.add(this.CssClasses_.CONTAINER);
this.element_.parentElement.insertBefore(container, this.element_);
this.element_.parentElement.removeChild(this.element_);
container.appendChild(this.element_);

公式の例を見ると、MDL がマークアップを大幅に変更することがわかります。これはまさに React が好まないことです。

ところで: React と MDL の組み合わせを研究する記事も作成しました。

于 2015-08-14T16:34:30.917 に答える