Reactjs React.createElement正在给出'；组件未定义'；错误_Reactjs

Reactjs React.createElement正在给出'；组件未定义'；错误

reactjs

Reactjs React.createElement正在给出'；组件未定义'；错误,reactjs,Reactjs,我是一个新的反应和尝试使用我的项目包另外，我正在尝试创建一个封装股票图表的Web组件在尝试执行React.createElement（ChartComponent，{prop:value}）时，我收到一个错误“ChartComponent未定义” 以下是我创建web组件（deploymentbox.html）的代码： const t=（document.currentScript | | document.u currentScript）.ownerDocument.querySelect

我是一个新的反应和尝试使用我的项目包

另外，我正在尝试创建一个封装股票图表的Web组件

在尝试执行React.createElement（ChartComponent，{prop:value}）时，我收到一个错误“ChartComponent未定义”

以下是我创建web组件（deploymentbox.html）的代码：


const t=（document.currentScript | | document.u currentScript）.ownerDocument.querySelector（“#MyChartTemplate”）；
函数updateChart（chartComponent，id）{
ReactDOM.render（React.createElement（ChartComponent，{data\u url:）http://xx.xx.xx.xx/deployment/deploymentbox/“+id}），t）
}
var MyChartElementPrototype=Object.create（HTMLElement.prototype）；
MyChartElementPrototype.createdCallback=函数（）{
var clone=document.importNode（t.content，true）；
updateChart（clone.querySelector（'ChartComponent'），this.getAttribute（“id”）| |“”）；
this.createShadowRoot（）.appendChild（克隆）；
};
var MyChartElement=document.registerElement（'my-chart'{
原型：MyChartElementPrototype
});

main.e36f828b.js文件由webpack生成

以下是在HTML页面（boxtest.HTML）中使用web组件的代码：


我的组件示例

以下是ChartComponent的定义（包含在main.e36f828b.js文件中）：

从“React”导入React；
从'react dom'导入{render}；
从“./Chart”导入图表；
从“/utils”导入{getData}
从“react stockcharts/lib/helper”导入{TypeChooser}；
类ChartComponent扩展了React.Component{
componentDidMount（）{
this.state.data\u url=this.props.data\u url
getData（数据\ url）。然后（数据=>{
this.setState（{data:data}）
})
}
render（）{
if（this.state==null）{
返回加载。。。
}
返回(
{type=>}
)
}
}
导出默认图表组件；

这段代码（在上一个代码片段中）是从react stockcharts烛台示例中提取的（有一些小改动）

为什么我会出错？我是不是错过了一些简单的东西？任何帮助都将不胜感激

提前感谢。

您要在ChartComponent中的何处导入？@dmikester1是否需要显式导入它？我想是因为我包括main.e36f828b.js（通过标记，因为ChartComponent是在main.e36f828b.js中导出的，所以它会被导入。我很困惑。你的main.xxxx.js不是呈现和构建的代码吗？你应该在使用它的地方将ChartComponent导入到你的组件中。你为什么要处理main.xxxx.js文件？你不应该在你的c中显式调用它ode。您的react代码不应该从dist文件夹加载任何内容。您创建react应用程序，当它准备好运行或只是测试时，您构建它，然后创建dist文件夹，这就是您将在生产服务器上抛出的实际代码。@dmikester1很抱歉，我是react新手。我没有弄乱程序main.xxx.js文件。我刚刚将其包含在html中，因为它包含ChartComponent。我认为这是导入ChartComponent的方法。您能告诉我如何导入ChartComponent吗？

<template id="MyChartTemplate">
  <ChartComponent />
</template>

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="/dist/main.e36f828b.js"></script>

<script>
const t = (document.currentScript||document._currentScript).ownerDocument.querySelector('#MyChartTemplate');

function updateChart(chartComponent, id) {
  ReactDOM.render(React.createElement(ChartComponent, { data_url: "http://xx.xx.xx.xx/deployment/deploymentbox/"+id }), t)
}

var MyChartElementPrototype = Object.create(HTMLElement.prototype);

MyChartElementPrototype.createdCallback = function () {
    var clone = document.importNode(t.content, true);
    updateChart(clone.querySelector('ChartComponent'), this.getAttribute("id") || "");
    this.createShadowRoot().appendChild(clone);
};

var MyChartElement = document.registerElement('my-chart', {
    prototype: MyChartElementPrototype
});
</script>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>My Component Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
    <link rel="import" href="http://xx.xx.xx.xx/deployment/deploymentbox/">
  </head>
  <body>

    <div id="chart">
      <my-chart id=1 />
    </div>

  </body>
</html>

import React from 'react';
import { render } from 'react-dom';
import Chart from './chart';
import { getData } from "./utils"

import { TypeChooser } from "react-stockcharts/lib/helper";

class ChartComponent extends React.Component {
    componentDidMount() {
        this.state.data_url = this.props.data_url
        getData(data_url).then(data => {
            this.setState({ data : data })
        })
    }
    render() {
        if (this.state == null) {
            return <div>Loading...</div>
        }
        return (
            <TypeChooser>
                {type => <Chart type={type} data={this.state.data} />}
            </TypeChooser>
        )
    }
}

export default ChartComponent;