Отображение нескольких элементов на основе числа, а не сопоставления через массив
Я знаком с отображением и массивом, чтобы отображать что-то для каждого числа в массиве. Но каков эффективный способ добиться того же с помощью числа?
Я оказался в ситуации, когда у меня есть integer, представляющий количество страниц, и компонент <Page>, который принимает опору pageNumber.
У меня есть следующая функция рендеринга:
renderPages() {
for (let i = 1; i < this.state.numPages; i++) {
return <Page pageNumber = {1} />;
}
}
Функция renderPages реализована в моей функции класса render следующим образом:
render() {
return (
<div>
{this.renderPages()}
</div>
);
}
Я понимаю, что при первом возврате renderPages закрывается. Таким образом, в итоге отображается только первая страница. Как я могу отобразить здесь больше страниц?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Добавить в массив, а затем вернуть массив.
renderPages() {
const arr = []
for (let i = 1; i <-this.state.numPages; i++) {
arr.push(<Page pageNumber = {1} />)
}
return arr
}
или вы можете сделать это без использования функции, создав пустой массив,
render() {
return (
<div>
{(new Array(this.state.numPages)).map((item, i)=><Page pageNumber = {i} />)}
</div>
);
}
renderPages() {
const arr = []
for (let i = 1; i <-this.state.numPages; i++) {
arr.push(<Page pageNumber = {1} />)
}
return arr
}
render() {
return (
<div>
{this.renderPages().map((item)=>(item))}
</div>
);
}
Было бы неплохо объяснить, что делает этот код. Хотя код полезно иметь, OP (и все остальные) выиграют от объяснения.
Еще одно предпочтение (более короткая версия):
https://stackoverflow.com/a/51335795/9206753 (мой предыдущий ответ)
Чтобы выполнить цикл несколько раз и вернуться, вы можете добиться этого с помощью from и map:
<div>
{Array.from(Array(this.state.numPages)).map((item, index) =>
<Page key = {index} pageNumber = {index + 1} />
)}
</div>
Надеюсь, это поможет
Спасибо, собираюсь настроить ваш ответ, чтобы он лучше соответствовал моей проблеме, но это сработало для меня более надежно, чем другие опубликованные решения!
@BarryMichaelDoyle рад, что это помогло!
Ах да, хороший подход. Я думал об этом, я не был уверен, будет ли это лучшим решением :)