如何在React的map函数循环中使用<br>标签

你当前的问题是把<br>作为字符串拼接进了结果里，React会将其视为普通文本渲染，不会解析成HTML换行标签，所以无法实现换行效果。下面是几种正确的实现方式：

方法1：返回包含
的JSX片段 #

在map回调中返回JSX元素，用React.Fragment（或短语法<>...</>）包裹内容和<br>，同时要给每个元素添加唯一的key属性：

import React from 'react'

const items = [{
  name: "EVC",
  price: 300
},{
  name: "JVN",
  price: 500
}]

const App = () => {
  return (
    <div className='items'>
      {items.map((item, index) => (
        <>
          {item.name + item.price}
          <br />
        </>
      ))}
    </div>
  )
}

export default App

方法2：用块级元素实现自然换行 #

给每个条目包裹块级元素（比如<div>），块级元素默认会占满一行，无需手动添加<br>，这种方式更利于后续样式扩展：

import React from 'react'

const items = [{
  name: "EVC",
  price: 300
},{
  name: "JVN",
  price: 500
}]

const App = () => {
  return (
    <div className='items'>
      {items.map((item, index) => (
        <div key={index}>
          {item.name + item.price}
        </div>
      ))}
    </div>
  )
}

export default App

方法3：用dangerouslySetInnerHTML解析HTML字符串（不推荐） #

如果必须通过字符串拼接的方式实现，可以使用dangerouslySetInnerHTML强制解析HTML，但仅当内容完全可控、无用户输入时使用，否则存在XSS安全风险：

import React from 'react'

const items = [{
  name: "EVC",
  price: 300
},{
  name: "JVN",
  price: 500
}]

const App = () => {
  const itemContent = items.map(item => `${item.name}${item.price}`).join('<br>')
  return (
    <div className='items' dangerouslySetInnerHTML={{ __html: itemContent }} />
  )
}

export default App

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