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

Question

我无法动态地创建一个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.

3）我已经在使用帕斯卡命名法“PieChart”

import PieChart from "../component/PieChart";
class App extends Component {

  render() {
    const GraphWidget = React.createElement("PieChart");
    return (
      <div>
        {GraphWidget}

      </div>
    )
  }


}


export default App;

- Sumanth madey

---

不要在PieChart周围使用引号，即const GraphWidget = React.createElement(PieChart);。 - Hunter McMillen

Answer 1

根据createElement文档：

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

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

const GraphWidget = React.createElement(PieChart);

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

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

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

- Sulthan

---

我从一个Json对象中获取到了"Piechart"，它的"type"是"PieChart"，在使用React.createElement(PieChart)之前，有没有什么方法可以进行转换？ - Sumanth madey

你可以创建一个从字符串到组件的映射，稍后我会在我的回答中更新一个示例。 - Sulthan

我需要基于Json响应动态创建一个组件。您认为我需要提前创建所有预期组件的映射吗？有没有办法避免这种硬编码？ - Sumanth madey

@Sumanthmadey 这正是我所说的。老实说，整个想法似乎有缺陷。通过JSON传递随机的React组件现在才成为可能。 - Sulthan

但是如何将key属性添加到子元素中呢？ { pageConfig, key: section, } )``` 它不会将key应用于。 - Alexey Nikonov

嘿@Sumanthmadey，你有没有解决从JSON对象动态加载React组件的方案？ - bipin patel

Answer 2

你应该使用 **PascalCase** 命名规则。

例如：

class StudentGrades extends Component{

 // Your Stuff

}

- Ravindra Miyani

Answer 3

你创建的组件名称应以大写字母开头，并且在JSX中使用时也应该使用相同的名称。

    class TodoItem extends React.Component {


      render(){

      return <TodoItem> 
     }

这可能是问题之一

- Shashwat Gupta