React中使用join方法添加换行失效问题求助

问题原因 #

你用join("<br />")生成的是字符串，React会把<br />当成普通文本直接渲染，不会解析成HTML换行标签，所以看不到预期的换行效果。

几种解决方案 #

方案1：遍历数组生成JSX元素（推荐）

直接遍历数组，为每个元素搭配换行标签，最后一个元素可省略多余换行：

const continents = ['Africa','America','Asia','Australia','Europe'];
const element = (
  <div title="Outer div">
    <h1>
      {continents.map((continent, index) => (
        <React.Fragment key={index}>
          Hello {continent}!
          {index !== continents.length - 1 && <br />}
        </React.Fragment>
      ))}
    </h1>
  </div>
);

• 用React.Fragment包裹内容，避免生成额外DOM节点
• key属性是React列表渲染的必填项，确保元素更新时的正确性

方案2：使用dangerouslySetInnerHTML（谨慎使用）

如果坚持用join的方式，可以通过该属性让React解析HTML标签，但注意仅当内容完全可信时使用（避免XSS注入风险）：

const continents = ['Africa','America','Asia','Australia','Europe'];
const helloContinents = Array.from(continents, c => `Hello ${c}!`);
const message = helloContinents.join("<br />");
const element = (
  <div title="Outer div">
    <h1 dangerouslySetInnerHTML={{ __html: message }}></h1>
  </div>
);

方案3：CSS样式实现纯文本换行

给元素添加white-space: pre-line样式，用普通换行符\n就能实现换行，安全且符合React文本渲染规范：

const continents = ['Africa','America','Asia','Australia','Europe'];
const helloContinents = Array.from(continents, c => `Hello ${c}!`);
const message = helloContinents.join("\n");
const element = (
  <div title="Outer div">
    <h1 style={{ whiteSpace: 'pre-line' }}>{message}</h1>
  </div>
);

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