为什么 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>
  );
}

为什么是钥匙？

因为 React 需要为下一个未来渲染内部使用的每个项目提供一个 id，所以如果键没有更改，React 就不会再次重新渲染该元素并使用最后渲染的版本。

如何将数组 ['h','e','l','l','o'] 渲染为“hello”？

好吧，如果您想要的是连接单词“hello”，则必须先将其转换为字符串

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

您可以在React Doc中阅读有关列表渲染的更多信息

但为什么 React 允许在 JSX 中放置数组呢？

我不是那个书呆子专家，但据我所知，它并不关心，它只是有一个值，并且它解释它（jsx 只是最后底层真实 JS 函数的表示语法），但它当然，数组有一个独特的行为，它将数组中的每个项目转换为字符串，然后相互渲染这些项目（它们的字符串转换结果）