Отображение массива в строку с разрывом строки - React
У меня есть функция, которая мне нужна, чтобы вернуть строку с разрывами строки или 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] для каждого человека, в данном конкретном случае пустую строку
Я видел похожие вопросы, но не смог решить свою проблему
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
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.info(peopleString)
document.getElementById('container').innerHTML = peopleString<div id = "container"></div>Привет @Luis Это не работает, я получаю странные символы вместо <div>, это стрелки внутрь и наружу, что-то похожее на этот <- div ->, но с более длинными строками
Этот ответ игнорирует тот факт, что OP использует React.
Вы не хотите возвращать строку, вы хотите вернуть массив элементов:
let peopleString = peopleArray.map((people) => (
<div>
{people.name || ""},
{people.last_name || ""}
</div>
));
return peopleString
Поскольку вы не выполняете конкатенацию строк с переменными. Вам нужно удалить Строки шаблона внутри ваших div.
${people.name && people.name} - это конкатенация строк с переменными.
Я также ставлю запятую между именем и фамилией
Если цель состоит в том, чтобы сократить список элементов до одной строки, которая отображается как многострочная строка, для этого можно использовать правило CSS white-space:pre-wrap;:
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
}
Я выложил сюда рабочую версию для вас также
Надеюсь это поможет!
Я хочу разрыв строки между разными людьми, а не между именем и фамилией
@ user3808307 а, я так понимаю, только что обновленный ответ - это вам поможет?
@ user3808307 хорошо, я только что выложил обновление - это работает для вас?
Нет, я пробовала, спасибо. Я решил это, сделав карту в рендере сейчас, ни одно из решений не работает
Мне кажется, что вы не возвращать ничего в этой функции карты:
(people) => { ...string here... }
Я бы предложил просто:
(people) => ( ...string here... )
или:
(people) => { return ...string here... }
Другая проблема может заключаться в том, что то, что вы, кажется, собираетесь вернуть в функции карты, НЕ является строкой, и, вероятно, (?) Должно быть; трудно сказать, не видя функцию в контексте.
Нравится? codeandbox.io/s/y2v5nr933z