如何让<div>中数组渲染的消息实现UI换行显示？

你当前的问题是因为直接在<h2>中拼接所有消息文本，导致它们默认在同一行显示。可以通过以下几种方式解决：

方法一：用块级元素包裹每条消息 #

把每条消息放在单独的块级元素里，每个元素会自动占据一行：

<div className="md:container xl:mx-auto space-y-1 border-zinc-800 rounded border-2 w-30 h-60 bg-blue-300">
  {_message.map((message, index) => (
    <h2 key={index} className="font-serif text-xl">{message}</h2>
    // 也可以用p标签替代h2：<p key={index} className="font-serif text-xl">{message}</p>
  ))}
</div>

注意：给每个循环元素添加key属性，符合React列表渲染的规范要求。

方法二：添加换行符并设置样式 #

如果不想额外嵌套元素，可将消息数组用换行符连接，再给容器添加样式让换行生效：

<div className="md:container xl:mx-auto space-y-1 border-zinc-800 rounded border-2 w-30 h-60 bg-blue-300 whitespace-pre-wrap">
  <h2 className="font-serif text-xl">{_message.join('\n')}</h2>
</div>

这里用到Tailwind的whitespace-pre-wrap类，它会保留文本中的换行符并自动换行。

方法三：手动插入换行元素 #

在每条消息后添加<br />实现强制换行：

<div className="md:container xl:mx-auto space-y-1 border-zinc-800 rounded border-2 w-30 h-60 bg-blue-300">
  <h2 className="font-serif text-xl">
    {_message.map((message, index) => (
      <>
        {message}
        <br />
      </>
    ))}
  </h2>
</div>

使用<>短语法可以避免生成额外的DOM节点。

内容的提问来源于stack exchange，提问作者Hacek