如何使用typescript（tsx）在一个DIV中呈现多个reactjs元素？_Reactjs_Typescript_Render_React Jsx

如何使用typescript（tsx）在一个DIV中呈现多个reactjs元素？

reactjs typescript

如何使用typescript（tsx）在一个DIV中呈现多个reactjs元素？,reactjs,typescript,render,react-jsx,Reactjs,Typescript,Render,React Jsx,参考下面的代码，我需要在同一个容器下呈现3个元素/组件我尝试为每个元素调用Render函数，但最后一个元素似乎取代了前两个元素，而不是附加到容器中 ReactDOM.render( React.createElement('div', null, [...yourComponentsHere]), document.getElementById('container') ) 下面的代码不会呈现任何内容。所以我不确定正确的方法是什么应该有一种方法让ReactJS在同一个容器（d

参考下面的代码，我需要在同一个容器下呈现3个元素/组件

我尝试为每个元素调用Render函数，但最后一个元素似乎取代了前两个元素，而不是附加到容器中

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

下面的代码不会呈现任何内容。所以我不确定正确的方法是什么

应该有一种方法让ReactJS在同一个容器（div）中呈现多个元素吗

let容器：Element=document.getElementById（id）；
ReactDOM.render（[,，
,
验证容器）；

你不能。你需要一个包装纸。下面是一个理解它的例子，您的意思是希望

foo

同时成为

“Hello”

和

：

let foo = "Hello" asWellAs 123;

这不是有效的JavaScript。但是，您可以将其包装在例如

div

中，使其返回到一个对象。这类似于：

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

在react的许多地方，您需要一个容器

你不能。你需要一个包装纸。下面是一个理解它的例子，您的意思是希望

foo

同时成为

“Hello”

和

：

let foo = "Hello" asWellAs 123;

这不是有效的JavaScript。但是，您可以将其包装在例如

div

中，使其返回到一个对象。这类似于：

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

在react的许多地方，您需要一个容器

函数

React.createElement

将要创建的元素类型（如果传递字符串，则它是HTML元素名称，但也可以是对

ReactClass

的引用），然后是

props

对象，然后是未确定数量的子元素作为以下参数

您应该创建一个

div

元素，该元素包含需要渲染的所有内容，然后将其传递给

ReactDOM.render

函数

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

要在div中使用逗号分隔的子级列表

您可以找到

createElement

函数的文档

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

创建元素后，在

ReactDOM.render

中使用该元素

不能在没有包装的情况下呈现同级组件。您需要将它们放入

div

或任何其他容器中

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

React.createElement

函数采用要创建的元素类型（如果传递字符串，则它是HTML元素名称，但也可以是对

ReactClass