typescript（tsx）を使って1つのDIVの中に複数のreactjs要素をレンダリングする方法は？

Question

以下のコードを参照して、3つの要素/コンポーネントを同じコンテナの下にレンダリングする必要があります。

各要素に対してRender関数を呼び出そうとしましたが、最後の要素はコンテナに追加するのではなく最初の2つを置き換えるようです。

以下のコードは何も描画しません。だから私はそれを行う正しい方法はよく分かりません。

ReactJSが複数の要素を同じコンテナ（div）内にレンダリングする方法があるはずですか？

let container:Element = document.getElementById(id); 

ReactDOM.render([<HelloComponent class="welcome" compiler="TypeScript" framework="ReactJS" />, 
    <LabelTextbox type="text" label="Username" model="{model}" />, 
    <button onclick="model.validate()">Validate</button>], container); 

Answer 1

できません。あなたはラッパーが必要です。

let foo = "Hello" asWellAs 123; 

これは有効なJavaScriptではありません。ここでは何を基本的に言っていることは、あなたがfooが同時に"Hello"と123になりたいということです、それを理解するための一例です。しかし、あなたはそれを例えば次のように包むことができます。 divだから、ただ一つのオブジェクトに戻る。それは次のようになります：

let foo = {a:"Hello", b:123}; 

多くの場合、反応する場所には1つの容器が必要です。

Answer 2

React.createElement機能は、子どもの未定数、その後、propsオブジェクト、その後、（文字列が渡された場合、それはHTML要素名だが、それはまたReactClassを参照することができます）作成する要素の型を取ります次のような議論をする。

レンダリングが必要なものがすべて含まれているdiv要素を作成し、それをReactDOM.render関数に渡す必要があります。

React.createElement("div", null, [...yourComponentsHere]) 

div内に欲しいカンマ区切りの子リスト。

HerecreateElementの機能に関するドキュメントがあります。

要素を作成したら、ReactDOM.renderの要素を使用します。

兄弟コンポーネントをラッパーなしでレンダリングすることはできません。 divまたは他の容器の中に入れる必要があります。

ReactDOM.render( 
    React.createElement('div', null, [...yourComponentsHere]), 
    document.getElementById('container') 
) 

Answer 3

div内の要素を閉じて文字列として渡してみます。 []の代わりに ""を使用してください。