太长不看

只要利用Array.prototype.map()的索引，我发现可以进行条件分支。

请用中文进行重新表述，以下为一个选项：

内容

在React的JSX中，无法将换行符显示为UI上的换行。
另外，仅进行简单的字符串替换时，无法将
作为DOM进行识别，而只会将其作为普通字符串显示。

就处理方法而言，有各种各样的方法可以考虑。

就我个人而言，使用for循环的方法看起来简单而有效，但我仍然担心最后会留下一个`
`。

export const MultiLines = props => {
  const { text } = props;
  const lines = text.split(/\r?\n/);

  return (
    <>
      {lines.map((line: string, index: number) => (
        <React.Fragment key={index}>
          {line}<br />
        </React.Fragment>
      ))}
    </>
  );
};

提出处理方案

我认为在使用Array.prototype.map()时，可以利用索引，只在绘制除最后一个元素以外的元素时插入换行符”
“。

export const MultiLines = props => {
  const { text } = props;
  const lines = text.split(/\r?\n/);

  return (
    <>
      {lines.map((line: string, index: number) => (
        <React.Fragment key={index}>
          {line}
          {index + 1 !== lines.length && <br />}
        </React.Fragment>
      ))}
    </>
  );
};

在CodePen上查看Morichan（@Morichan-the-sasster）的代码，将文本按换行符分割并转换为BR标签。