为什么在尝试使用返回值创建图表时出现三个错误?

Question

{this.state.selectedChart.map(item => {
console.log(item.name)
return  <div className="chartDisplayItem">
<item.name data={data} options={options} />
</div>
})}

item.name返回Bar.我试图让它作为图表工作，但得到错误。

1. 警告：列表中的每个孩子都应该有一个唯一的"钥匙"道具。
2. 警告：使用了不正确的大小写。对 React 组件使用 PascalCase，对 HTML 元素使用小写。
3. 警告：此浏览器中无法识别该标记。如果你打算渲染一个 React 组件，它的名字以大写字母开头。

Answer 1

• <div className="chartDisplayItem">你应该将唯一密钥传递给div，请在此处查看文档 https://reactjs.org/docs/lists-and-keys.html
• <item.name不是HTML元素，最好将其包装为功能组件，然后呈现它，例如，<Item values={item.attributes} />，但在这里Item将是一个不同的组件，它将根据其属性呈现项目，例如name
• <item.name不是 HTML 元素，而是您的自定义名称，DOM 将无法识别名为bar的节点。

Answer 2

警告 1： 对 html 元素或 React 组件使用 key 属性，并使用索引初始化，如以下代码

警告 2：将 item.name 更改为 Item.Name

警告 3：当您不使用 PascalCase for React 组件浏览器时，您的组件已知为 html 元素并警告未知的 html emelent

{this.state.selectedChart.map((Item, index) => {
console.log(Item.name)
return  <div key={index} className="chartDisplayItem">
<Item.name data={data} options={options} />
</div>
})}