javascript - 数组映射到带有换行符的字符串 - React

Question

我有一个函数，我需要返回一个带有换行符的字符串，或者能够正确渲染的 div

export const showPeople = (peopleArray = []) => {
  let peopleString = peopleArray ? peopleArray.map((people) => {
    <div>
      `${people.name && people.name},
      ${people.last_name && people.last_name}`
    </div>
  }).join('') : ''
  return peopleString
}

我尝试了使用 div、不使用 div、使用 return 不返回、不使用 join，并且我得到每个人的 [Object]，在这种特殊情况下是一个空字符串

我见过类似的问题，但无法解决我的问题

Answer 1

如果目标是将项目列表减少为呈现为多行字符串的单个字符串，那么您可以使用 white-space:pre-wrap; CSS 规则实现这一目标:

body {
  white-space: pre-wrap;
}

完成后，您应该能够呈现在 \n 字符上带有换行符的多行字符串，如下所示:

export const showPeople = (peopleArray = []) => {

  let peopleString = peopleArray ? peopleArray.map((people) => (
      `${people.name ? people.name : ''} ${people.last_name ? people.last_name : ''}`
  })
  .join('\n') : ''

  return peopleString
}

I've posted a working version here也给你看看

希望这有帮助!