1

1 つの React ファイルには、次のものがあります。

 ReactDOM.render(
   <BlogButton />,
   document.getElementById('nav-blog--react')
 );

 ReactDOM.render(
   <NavButton />,
   document.getElementById('nav-home--react')
  );

  ReactDOM.render(
   <PoweredByButton />,
   document.getElementById('nav-powered--react')
  );

最初のレンダリングのみが機能します。「BlogBu​​tton」が表示されます。他の 2 つの「NavButton」と「PoweredbyButton」は表示されません。コンソールにもエラーが表示されません。ファイルに複数のレンダリングを含めることができないためですか? これらすべてを 1 つのレンダー コールに結合するにはどうすればよいでしょうか。

4

1 に答える 1

-1

あなたの例が機能しない理由を説明することはできませんが、私が知っていることと反応ドキュメントで読んだことから、「go-to」メソッドは、他のすべてを含む1つのメイン/ラッパーコンポーネントを作成しています。

ラッパー コンポーネントは、新しい要素を追加する新しい DOM と見なすことができます。

DOM に直接レンダリングされる 1 つのラッピング コンポーネントを作成することをお勧めします。他の要素はラッパー コンポーネント内でレンダリングされます。

WrapperComponent
...
render(
<div>
<FirstComponent />
<SecondComponent />
</div>
);


ReactDOM.render(
   <WrapperComponent />,
   document.getElementById('nav-powered--react')
  );
于 2016-01-21T17:18:31.217 に答える