使用换行符将数组映射到字符串 - 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，返回没有返回，没有连接，我得到每个人的[Object]，在这种特殊情况下是一个空字符串

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

Answer 1

你不想返回一个你想要返回一个元素数组的字符串：

let peopleString = peopleArray.map((people) => (
  <div>
   {people.name || ""},
   {people.last_name || ""}
  </div>
));
return peopleString

Answer 2

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

---

var peoples = [{name: 'Jhon', last_name: 'Doe'},{name: 'Mario', last_name: 'Peach'}]

var peopleString = peoples.map(people => 
  `<div>
    ${people.name}, ${people.last_name}
  </div>`
).join('')

console.log(peopleString)

document.getElementById('container').innerHTML = peopleString

<div id="container"></div>

Answer 3

因为你没有用变量进行字符串连接。您需要删除div中的模板字符串。

Answer 4

在我看来，你没有返回该地图功能中的任何内容：

(people) => { ...string here... }

我建议，简单地说：

(people) => ( ...string here... )

要么：

(people) => { return ...string here... }

---

另一个问题可能是你似乎打算在map函数中返回的不是字符串，可能（？）应该是;如果没有在上下文中看到函数，很难说。

Answer 5

如果目标是将项列表减少为呈现为多行字符串的单个字符串，则可以使用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也供你参观

希望这可以帮助！