javascript - 为什么 react 将字符串数组渲染为 HTML 元素？

Question

我想了解为什么会发生这种情况，只是为了教育目的。
所以我有一个字符串数组:

const wordArr = ["h", "o", "l","a", " ", "m", "u", "n", "d", "o"];

如果将此数组传递给 JSX

return <p>{word}</p>

然后输出将是这样的:

<p>hola mundo</p>

为什么 React 将这个数组解释为一个句子。我只想知道它为什么会发生，它背后的机制是什么？当您有一组单词和 HTML 元素时，这可能会很有帮助，您可以在其中通过传递类/样式来操作 HTML 元素。
老实说，我不知道你能做到这一点，我最近一直在使用，但我真的不知道为什么会这样。很高兴知道为什么会发生这种情况。提前感谢您分享您的知识。

Answer 1

Jsx 解释大括号内的值 {}并将它们呈现在组件中，这是预期的行为。
那么常见的问题是我们如何渲染一个列表(数组)？
我们循环它并在不同的 jsx 元素中渲染每个项目

const staticItems = [ 'hello', 'world' ];

function SomeComponent(props){

  return (
    <div>
      { items.map(item => (<span key={item}> {item} </span>)) }
    </div>
  );
}

为什么是 key ？
因为 react 需要为它在内部用于下一次渲染的每个项目提供一个 id，所以如果键没有更改，react 不要再次重新渲染元素并使用最后渲染的版本。
如何将数组 ['h','e','l','l','o'] 渲染为“hello”？
好吧，如果您想要的是连接的单词“hello”，则必须先将其转换为字符串

<div>
  { arrayOfChars.join("") }
</div>

您可以在 React Doc 阅读有关列表渲染的更多信息。
但是为什么 React 允许在 JSX 中放置一个数组呢？
我不是那个 Nerd 专家，但据我所知，它不在乎，它只是有一个值，它会解释它(jsx 只是最后底层真实 JS 函数的表示语法)，但它当然，数组具有独特的行为，它将数组中的每个项目转换为字符串，然后将项目(它们的字符串转换结果)相互渲染