Question

请参阅下面的代码，我需要在同一个容器下渲染3个元素/组件。

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

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

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。但是你可以将它包装在例如一个div所以它只回到一个对象。这类似于：

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

在很多地方，你需要一个容器。

Answer 2

React.createElement函数采用要创建的元素的类型（如果传递一个字符串，它是一个HTML元素名称，但它也可以是对ReactClass的引用），然后是{{ 1}} object，然后是一个未确定数量的子节点作为以下参数。

您应该创建一个props元素，其中包含您需要呈现的所有内容，然后将其传递给div函数。

ReactDOM.render

逗号分隔您想要在div中的子项列表。

Here您可以找到React.createElement("div", null, [...yourComponentsHere])函数的文档。

创建元素后，请在createElement。

中使用该元素

如果没有包装器，则无法呈现兄弟组件。您需要将它们放在ReactDOM.render或任何其他容器中。

div

Answer 3

尝试关闭div中的元素并传递为字符串。而不是[]使用“”。

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

3 个答案: