菜鸟问题 ->如何在 Reactjs 中获得一堵 html 标签墙而不返回"[Object object]"？

Question

我要显示"x"返回到浏览器的h2标签的数量，但它返回到屏幕上呈现"x"[对象对象]"的编号

如果我声明"，它不是作为一个标签，而是简单的文本。我确实意识到我可以用数组来尝试它，但我只是想知道为什么它不起作用，如果有一种方法可以用最简单的方式实现它

import React from 'react';
function App(){
var n1 = <h2>testing</h2>
var n2;
for(let i = 0;i<10;i++){
n2 = n2 + n1;
console.log(n2)
}
return <>{n2}</>
}
export default App;

Answer 1

n2 = n2 + n1;

问题就在这里——你不能把对象加在一起，所以JS会把它们加起来，就好像它们是数字一样。由于不是这种情况，对象将被转换为字符串并连接起来。对象的默认toString值是[object object]，所以这就是你看到的显示。

Answer 2

我认为react只会让您显示一个节点数组未附加带有'+'的节点试试这个:

var n2 = []
n2.push(n1)

也n1已经有了作用域，我不确定它可以在渲染中多次重新引用。试着把它移到循环的块范围

var n2 = [];
for(let i = 0;i<10;i++){
var n1 = <h2>testing</h2>

Answer 3

没有引号，这不是文本，它是JSX, React编译成这个函数:React.createElement(component, props, ...children)，它返回一个新的React元素对象，所以它不会工作控制台日志

https://reactjs.org/docs/jsx-in-depth.html

由于它是一个对象，您可以通过尝试console.dir()而不是console.log()来列出该对象的属性。但是React元素本身在使用React.render()渲染之前并不是HTML元素，所以它不会在控制台中显示为HTML标签，此时它只是一个javascript对象。

Answer 4

你不能只需使用+操作符将一个组件添加到另一个组件。实际上，每个变量或对象只能保存一个jsx组件作为其值。最简单的方法是使用数组:

import React from 'react';
function App(){
var n1 = <h2>testing</h2>
var n2 = [];
for(let i = 0;i<10;i++){
n2.push(n1);
console.log(n2)
}
return <>{n2}</>
}
export default App;

一个更简单的方法是这样做，可能会有帮助:

import React from 'react';
const App = () => <>{ Array(10).fill().map((_, i) => <h2>testing</h2>) }</>;
export default App;