React JSX中渲染对象字符串数组 空串转空行且单个字符串独占一行

原有代码的问题在于直接将所有字符串放入同一个<p>标签渲染，既没有按空字符串拆分段落，也没有处理同一段落内多行文本的换行逻辑，因此无法达到预期效果。

调整后的代码 #

父组件调用代码 #

直接将完整的ptr0数组传递给Transcript组件即可，无需提前遍历：

<Transcript transcript={objecttrans.ptr0} />

Transcript组件代码 #

组件内部先对输入的文本数组按空字符串做段落分组，同一段落内的多行内容用<br>分隔，不同段落用独立的<p>标签渲染：

import React from 'react'

const Transcript = (props) => {
  const paragraphs = []
  let currentParagraph = []

  // 按空字符串拆分段落
  props.transcript.forEach(line => {
    if (line === '') {
      // 遇到空行时保存当前已收集的非空段落
      if (currentParagraph.length > 0) {
        paragraphs.push(currentParagraph)
        currentParagraph = []
      }
      // 如果需要显式渲染空行，可以放开下面的注释
      // paragraphs.push([])
    } else {
      currentParagraph.push(line)
    }
  })

  // 处理最后一段未保存的内容
  if (currentParagraph.length > 0) {
    paragraphs.push(currentParagraph)
  }

  return (
    <div className="content">
      {paragraphs.map((paraLines, paraIndex) => (
        <p key={paraIndex}>
          {paraLines.map((line, lineIndex) => (
            <React.Fragment key={lineIndex}>
              {line}
              {lineIndex !== paraLines.length - 1 && <br />}
            </React.Fragment>
          ))}
        </p>
      ))}
    </div>
  )
}

export default Transcript

效果说明 #

以上代码会将连续的非空文本行放在同一个<p>标签内，行之间插入<br>换行，空字符串作为段落分隔符拆分不同<p>标签，和要求的最终渲染效果完全一致。如果需要将原数组中的空字符串显式渲染为空白行，放开代码中对应注释即可。

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