如何在React中使用模板字面量每行显示一组数据项？

问题的核心在于：HTML 会忽略纯文本中的换行符和多余空格，直接把模板字符串拼接后的内容渲染成连续文本。要实现每行显示一组数据，我们可以用模板字面量生成文本内容，再把每个文本包裹在块级元素（如<div>）中，或者利用<br>标签强制换行（但需要注意安全问题）。

推荐方案（安全且简洁） #

把每个模板字符串生成的文本放在<div>（或者<p>）里，块级元素默认会独占一行，完美解决换行需求，还不需要使用危险的dangerouslySetInnerHTML：

import React from 'react'

function NameList() {
  const info = [
    { id:1, name:'nishant', age:18, skill:'noob in everthing' },
    { id:2, name:'mayank', age:18, skill: 'python king' },
    { id:3, name:'kartik', age:18, skill: 'python hero' }
  ]

  // 用模板字面量生成每个项的文本，再包裹在div中
  const infoList = info.map(singleinfo=> (
    <div key={singleinfo.id}>
      {`${singleinfo.id} | ${singleinfo.name} | ${singleinfo.age} | ${singleinfo.skill}`}
    </div>
  ))

  return (
    <div>
      {infoList} {/* 这里建议不用放在h1里，h1是标题标签，数据用div更语义化 */}
    </div>
  )
}

export default NameList

另一种方案（用<br>标签） #

如果你一定要直接用模板字面量包含换行标签，需要使用dangerouslySetInnerHTML让React解析HTML标签，但这种方式存在XSS风险，仅当你完全信任数据内容时使用：

import React from 'react'

function NameList() {
  const info = [
    { id:1, name:'nishant', age:18, skill:'noob in everthing' },
    { id:2, name:'mayank', age:18, skill: 'python king' },
    { id:3, name:'kartik', age:18, skill: 'python hero' }
  ]

  const infoList = info.map(singleinfo=> 
    `${singleinfo.id} | ${singleinfo.name} | ${singleinfo.age} | ${singleinfo.skill}<br />`
  )

  return (
    <div>
      {/* 把数组拼接成字符串，用dangerouslySetInnerHTML渲染 */}
      <div dangerouslySetInnerHTML={{ __html: infoList.join('') }} />
    </div>
  )
}

export default NameList

为什么原来的代码不行？ #

你之前的代码把模板字符串数组直接放在<h1>中，React会自动把数组元素拼接成一个连续的字符串，HTML渲染时会忽略字符串里的换行符（即使你在模板里加\n也没用，因为HTML不识别纯文本换行），所以所有数据会挤在一行。

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