React渲染含<br>标签的数组时出现[object object]问题排查

你在map回调里执行change + <br/>的操作是错误的：

• React中<br/>是一个JSX元素，本质是React对象，当你把字符串和对象做拼接时，JS会将对象强制转换为字符串[object Object]，所以最终渲染结果会出现text1[object Object]这类内容。
• 如果代码里的<br/>是被转义为字符串（比如你示例里的<br/>），则会直接显示<br/>文本而非换行元素。

这里提供几种可行的修复方式：

方式一：返回文本与换行元素的数组 #

import React from 'react';

const FunctionalApp = () => {
  let changes = ["text1", "text2", "text3"];
  return (
    <span>
      {changes.map((change, index) => {
        // 以数组形式返回，React会依次渲染数组内的每个元素
        return [change, <br key={index} />];
      })}
    </span>
  )
}

注意：map渲染列表时必须给元素添加唯一key属性，避免React警告。

方式二：用Fragment包裹每一项 #

import React from 'react';

const FunctionalApp = () => {
  let changes = ["text1", "text2", "text3"];
  return (
    <span>
      {changes.map((change, index) => (
        // 用Fragment包裹文本和换行，避免额外DOM节点
        <>
          {change}
          <br />
        </>
      ))}
    </span>
  )
}

也可以使用完整的<React.Fragment>标签代替短语法<>...</>。

方式三：用文本换行符配合CSS样式 #

如果不需要生成<br/>DOM元素，可通过字符串换行符+CSS实现换行：

import React from 'react';

const FunctionalApp = () => {
  let changes = ["text1", "text2", "text3"];
  // 将数组转为带换行符的字符串
  const displayText = changes.join('\n');
  return (
    <span style={{ whiteSpace: 'pre-line' }}>
      {displayText}
    </span>
  )
}

white-space: pre-line会识别字符串中的换行符并渲染为换行效果。

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