从模板渲染元素答案

【问题标题】：Render elements from a template从模板渲染元素
【发布时间】：2020-06-12 22:57:21
【问题描述】：

我有很多元素，但不知道如何渲染它们，但要写 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>

等等……

那么我怎样才能创建一个模板以减少混乱？

【问题讨论】：

为什么不直接映射data.list？

标签： javascript reactjs list

【解决方案1】：

您可以在 JSX 中嵌入任意 JavaScript 表达式，因此对于您的示例，它应该如下所示

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

请注意，您必须在 JSX 中将表达式包装在 {} 中，否则，它将像纯文本一样呈现。

要详细了解为什么需要像上面一样指定key，可以参考这个link

【讨论】：

【解决方案2】：

您需要遍历列表中的项目。 React 文档很好地解释了这一点https://reactjs.org/docs/lists-and-keys.html

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

【讨论】：