如何将接口返回的JSON诗歌行数组在前端页面按换行正确渲染

你拿到的lines字段是包含14行诗句内容的字符串数组，直接将整个数组作为子元素传入<div className="lines">渲染时，JSX不会自动为每个数组项添加换行分隔逻辑，浏览器默认会将所有文本按连续内联流排版，最终就会出现所有诗句挤在一起、没有分行的效果。

需要对lines数组做二次遍历，为每一行诗句单独添加换行逻辑，以下是两种常用实现：

方式1：每行用独立段落标签包裹（推荐，语义化更佳） #

在.lines容器内遍历lines数组，将每一行诗句渲染为独立的<p>标签，后续可以通过CSS灵活控制行间距、边距，代码如下：

poem.map((item, poemIdx) => {
  const { author, title, lines } = item;
  if (author === undefined || title === undefined) return null;
  return (
    <div className="viewer" key={poemIdx}>
      <div className="author">{author}</div>
      <div className="title">{title}</div>
      <div className="lines">
        {lines.map((line, lineIdx) => (
          <p className="poem-line" key={`poem-${poemIdx}-line-${lineIdx}`}>
            {line}
          </p>
        ))}
      </div>
    </div>
  );
});

配套的CSS可以按需调整排版效果：

.poem-line {
  margin: 0.3em 0;
  line-height: 1.7;
}

方式2：行尾追加<br />换行标签 #

如果不想额外增加段落标签，也可以在每一行诗句末尾追加换行标签，注意处理最后一行避免多余空行：

<div className="lines">
  {lines.map((line, idx) => (
    <>
      {line}
      {idx !== lines.length - 1 && <br key={`br-${idx}`} />}
    </>
  ))}
</div>

• 所有通过map渲染的列表项必须添加唯一的key属性，避免React抛出渲染警告，同时防止组件状态出现异常
• 原代码中条件判断不满足时没有显式返回值，建议补上return null，避免隐式返回undefined导致的渲染报错
• 原代码中包裹卡片的空标签<></>没有实际作用，可以直接移除，减少不必要的DOM节点嵌套

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