0

たとえば、dialog.js で ReactJS クラスを定義した場合:

var divStyle = {
  padding: '15px',
  paddingBottom: '12px'
};

var Dialog = React.createClass({
 render: function() {
    return (
      <div style={divStyle}>...</div>
    );
  }
});

上記では、クラスを定義しています..しかし、私が見るすべての例には、React.renderComponent(<Dialog/>,document.getElementById('someId'));

これに関する問題は..このコンポーネントを異なるIDを持つ異なるページで使用して、またはおそらくいくつかの異なるIDでレンダリングしたい場合、実際のクラスでIDをハードコーディングできない. 何らかの方法でIDを渡すことができると思いますか??

しかしさらに、このjsクラスのロード後にロードされた別のJSクラスでコンポーネントをレンダリングできるようにしたいと考えています。最後に読み込まれる SPA アプリ用の app.js クラスがあります。その中で、ユーザーがリンクをクリックしたときに、その時点でこのコンポーネントのみをレンダリングしたい場合があります。render メソッドでは、実際にレンダリングされるかどうかを何らかの方法で制御できることを理解しています..しかし、アクションが発生しない限り、DOM に挿入することさえ気にしないことも考えています。怠惰な挿入のようなものだと思いますか？

私は自分のapp.jsで試しました:

function () {
  React.renderComponent(<Dialog/>,...);
}

しかし、このJSはJSX JSファイルではないため、明らかにこれは機能しません。そこで React.renderComponent(Dialog,...); を使ってみました。Dialog クラスはグローバルに定義されていると考えているため、利用可能ですが、それも失敗します。

Dialog クラスを別の関数で使用してレンダリングするにはどうすればよいでしょうか。

4

1 に答える 1

1

ここで概念的に何か間違っていると思います：

しかし、私が目にするすべての例には、React.renderComponent(<Dialog/>,document.getElementById('someId'));

短い例の後にrenderComponent呼び出しが続くという事実は、デモを表示するための些細な理由によるものです。繰り返しますが、React では、<Dialog />脱糖はDialog(). 呼び出さないと何も起こりません。

したがって、必要になるまで電話しないでください。

また、私はあなたが何を意味するのか理解できません：

ただし、このJSはJSX JSファイルではないため、明らかにこれは機能しません

そのファイルをJSXで処理できるのでしょうか？

JSX を関数に、またはその逆に精神的にマッピングするのに問題がある場合: ここでライブ コンパイラを試してください: http://facebook.github.io/react/jsx-compiler.html

于 2014-03-01T07:15:13.407 に答える