为什么 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 元素时，通过传递 class/style，你可以操纵 HTML 元素。说实话，我不知道你可以这样做，最近我一直在使用，但我真的不知道它为什么会这样做。知道原因会很好，谢谢您分享知识。

- medev21

---

这种行为不仅适用于字符串，它在React中是通用的。数组可以是组件或数字等，而不仅仅是字符串数组。 - Gulam Hussain

@GulamHussain 好的，但它为什么会这样解释呢？ - medev21

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，以便在未来的渲染中使用，所以如果key没有改变，React不会重新渲染元素，而是使用上次呈现的版本。

如何将数组['h'，'e'，'l'，'l'，'o']呈现为“hello”？

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

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

你可以在React Doc中了解有关列表渲染的更多信息。

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

我不是那个专家，但据我所知，它并不关心这个数组，它只有一个值，并将其解释（JSX只是底层真正的JS函数的表现语法），但当然对于数组有一个独特的行为，它会将数组中的每个项转换为字符串，然后将这些项（它们的字符串转换结果）一起呈现。

- Louay Al-osh

---

那并没有回答问题。OP想知道为什么React可以将字符串数组作为有效的子元素而无需显式解包。 - Martin

你是对的，我会更新答案。 - Louay Al-osh