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

发布时间：2020-12-15 20:14:17 所属栏目：百科来源：网络整理

导读：我无法动态创建React组件. 我看到空白页面,下面的代码没有错误. 1)尝试创建名为“PieChart”的元素 2)下面是我在控制台中看到的两个错误. 1. Warning: PieChart / is using incorrect casing. Use PascalCase for React components,or lowercase for HTML el

我无法动态创建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;

解决方法

从 createElement documentation：

Create and return a new React element of the given type. The type argument can be either a tag name string (such as ‘div’ or ‘span’),a React component type (a class or a function),or a React fragment type.

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

const GraphWidget = React.createElement(PieChart);

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!