Как визуализировать несколько элементов реагирования внутри одного DIV с помощью машинописного текста (tsx)?

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

Вы не можете. Вам нужна обертка. Вот пример, чтобы понять, что вы, по сути говоря, что вы хотите foo быть "Hello" и 123 в то же время:

let foo = "Hello" asWellAs 123; 

Это не действует JavaScript. Однако вы можете обернуть его, например. a div, так что он вернулся к одному объекту. Это будет схоже с:

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

Во многих местах реагирования требуется единый контейнер.

Answer 2

React.createElement функция принимает тип элемента, который будет создан (если строка передается это имя элемента HTML, но он также может быть ссылка на ReactClass), то props объект, то неопределенное количество детей как следующие аргументы.

Вам необходимо создать элемент div, содержащий все, что вам нужно сделать, а затем передать его функции ReactDOM.render.

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

список разделенных запятыми детей, которые вы хотите внутри div.

Here вы можете найти документы для функции createElement.

После того, как вы создали элемент, используйте его в ReactDOM.render.

У вас не могут быть предоставлены компоненты-родственники без обертки. Вам нужно поместить их в контейнер div или любой другой контейнер.

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

Answer 3

Попробуйте закрыть ваши элементы в div и передать как строку. Вместо [] используйте "".