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）我已经在使用Pascal案例“PieChart”

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

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

      </div>
    )
  }


}


export default App;

Answer 1

来自createElement documentation：

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

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

const GraphWidget = React.createElement(PieChart);

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

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

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

Answer 2

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

    class TodoItem extends React.Component {


      render(){

      return <TodoItem> 
     }

这可能是问题之一

Answer 3

您应该使用configurations.all { resolutionStrategy.force 'androidx.vectordrawable:vectordrawable:1.0.1' resolutionStrategy.force 'androidx.documentfile:documentfile:1.0.0' resolutionStrategy.force 'androidx.vectordrawable:vectordrawable-animated:1.0.0' resolutionStrategy.force 'androidx.fragment:fragment-animated:1.1.0-alpha04' resolutionStrategy.force 'androidx.appcompat:appcompat:1.1.0-alpha02' }命名约定。

例如，

**PascalCase**

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

3 个答案: