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

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 组件，请以大写字母开头。

标签： reactjs

Answer 1

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

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

警告 3：当您不将 PascalCase 用于 React 组件时，浏览器将您的组件称为 html 元素并警告未知 html 元素

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