Reactjs 无法在react组件中动态创建元素

我无法动态创建React组件。 我看到空白页没有错误，下面的代码

1） 正在尝试创建名为“PieChart”的元素

2） 下面是我在控制台中看到的两个错误

1. Warning: <PieChart /> is using incorrect casing. Use PascalCase for    
   React components, or lowercase for HTML elements.

2. Warning: The tag <PieChart/> is unrecognized in this browser. If you
   meant to    render a React component, start its name with an
   uppercase letter.

1。警告：正在使用不正确的外壳。使用PascalCase进行
React组件，对于HTML元素为小写。
2.警告：此浏览器无法识别该标记。如果你
要呈现React组件，请以
大写字母。

3） 我已经在用Pascal的“PieChart”

从“./component/PieChart”导入PieChart；
类应用程序扩展组件{
render（）{
const GraphWidget=React.createElement（“PieChart”）；
返回(
{GraphWidget}
)
}
}
导出默认应用程序；

来自：

创建并返回给定类型的新React元素。类型参数可以是标记名字符串（如“div”或“span”）、React组件类型（类或函数）或React片段类型

您正在尝试使用React组件类型，因此无法使用字符串，您需要直接使用该类：

const GraphWidget = React.createElement(PieChart);

如果您的目标是将字符串映射到组件，则可以使用字典创建简单映射：

const components = {
    PieChart: PieChart
    ...
};

const GraphWidget = React.createElement(components['PieChart']); 

您创建的组件应以大写字母开头，并使用 JSX中的这段代码也使用相同的名称编写

类TodoItem扩展了React.Component{
render（）{
返回
}

---

这可能是问题之一

您应该使用

**PascalCase**

命名约定

例如，

class StudentGrades extends Component{

 // Your Stuff

}

---

不要在

PieChart

周围使用引号，即

const-GraphWidget=React.createElement（PieChart）；

Im从Json对象获取“PieChart”作为“type”：“PieChart”，在React.createElement（PieChart）之前我可以用任何方式进行转换；您可以创建从字符串到组件的映射，我稍后将用一个示例更新我的答案。我需要根据Json响应动态创建一个组件。您是否建议我需要以前创建所有预期组件的映射？我们有没有办法避免这种硬编码？@Sumanthmadey这正是我要说的。老实说，整个想法似乎有缺陷。通过JSON传递一个随机反应组件现在是可能的。但是如何将key属性添加到子元素？

createElement（FormBody，{pageConfig，key:section，}）

它没有将key应用到

    class TodoItem extends React.Component {


      render(){

      return <TodoItem> 
     }

class StudentGrades extends Component{

 // Your Stuff

}