3

だから私はバックボーンルーターを使用して反応アプリを持っていますが、ナビゲートしようとするとDOMContentLoaded、次のようになります:

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

スタック トレースをステップ実行しようとしましたが、何が起こっているのかわかりません。エラー ( ReactMount._registerComponent) をスローするメソッドが数回ヒットし、最初の 2 つはエラーをスローしません。DOM 要素として問題はそこにあります。私は問題なく他のプロジェクトで使用したコンポーネントを使用しており、これをデバッグするためにすべての部分を最小限に抑えています (これまでのところ失敗しています)。

DOM 構造:

<html>
    <head>
    </head>
    <body>
        <div id="app-container">
        </div>
        <script src="http://fb.me/react-with-addons-0.12.0.js"></script>
        <script type="text/javascript" src="js/application.js"></script>
    </body>
</html>

ルーターコードを使用：

AppRouter.prototype.signIn = function () {
  var container = document.getElementById( 'app-container' );

  React.render(
    <LoginForm />,
    container
  );
};

LoginForm コンポーネント:

var LoginForm = React.createClass({
  render: function () {
    return(
      React.render(
        <div id="login-form-component">
        </div>
      )
    );
  },
});

ルートがヒットLoginForm#renderしました。期待どおりにヒットしました。何が欠けていますか?

スタック トレースは次のとおりです。その下部には、ルーターのサインイン方法が示されています。

invariant 
ReactMount._registerComponent 
(anonymous function) 
ReactPerf.measure.wrapper 
ReactMount.render 
ReactPerf.measure.wrapper 
React.createClass.render 
(anonymous function) 
ReactPerf.measure.wrapper
(anonymous function)
ReactPerf.measure.wrapper
ReactComponent.Mixin._mountComponentIntoNode
Mixin.perform 
ReactComponent.Mixin.mountComponentIntoNode
(anonymous function)
ReactPerf.measure.wrapper
ReactMount.render 
ReactPerf.measure.wrapper
AppRouter.signin

読んでくれてありがとう！

4

2 に答える 2

4

エラーは、実際には LoginForm#render のここから発生しています。

return(
  React.render(
    <div id="login-form-component">
    </div>
  )
);

そうあるべき

return(
    <div id="login-form-component">
    </div>
);

render 関数は仮想 DOM ノードを返す必要がありますが、それらをマウントする必要はありません。1 つの引数で React.render を呼び出しているため、特にエラーが発生します。

于 2014-11-08T18:34:33.113 に答える