Визуализация элементов из шаблона

Question

У меня много элементов, но я не знаю, как их визуализировать, кроме как написать 40 строк jsx

<p>{this.props.data.list[0].dt_txt}</p>
<p>{this.props.data.list[1].dt_txt}</p>
<p>{this.props.data.list[2].dt_txt}</p>
<p>{this.props.data.list[3].dt_txt}</p>
<p>{this.props.data.list[4].dt_txt}</p>
<p>{this.props.data.list[5].dt_txt}</p>
<p>{this.props.data.list[6].dt_txt}</p>
<p>{this.props.data.list[7].dt_txt}</p>
<p>{this.props.data.list[8].dt_txt}</p>
<p>{this.props.data.list[9].dt_txt}</p>
<p>{this.props.data.list[10].dt_txt}</p>
<p>{this.props.data.list[11].dt_txt}</p>
<p>{this.props.data.list[12].dt_txt}</p>
<p>{this.props.data.list[13].dt_txt}</p>
<p>{this.props.data.list[14].dt_txt}</p>

и так далее ...

так как я могу создать шаблон для их рендеринга с меньшим количеством беспорядка?

Answer 1

Вы можете встроить произвольные JavaScript выражения в свой JSX, поэтому для вашего примера это должно выглядеть следующим образом

... // Other markups
{ 
    this.props.data.list.map(item => {
        return <p key={item.dt_txt}>{item.dt_txt}</p>
    });
}
... // Other markups

Обратите внимание, что вы должны заключить выражение в {} в вашем JSX, иначе он будет отображаться как обычный текст.

Чтобы узнать больше о том, почему вам нужно указать key, как указано выше, вы можете обратиться к этой ссылке

Answer 2

Вам нужно l oop над пунктами в списке. Реакционные документы объясняют это довольно хорошо https://reactjs.org/docs/lists-and-keys.html

this.props.data.list.map((listItem) =>
  <p key={listItem.id}>{listItem.dt_text}</p>
);