1

我正在尝试运行一个示例来显示在 Kendo React 中使用的图表创建。

该示例在本教程中： https ://www.telerik.com/kendo-react-ui/components/charts/chart/elements/chart-area/

我做了一些更改，以便能够通过浏览器运行它，而无需在本地安装 npm 包。但是，我无法显示这个。我在控制台中收到错误

警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查ChartContainer. 在 ChartContainer

我错过了什么？？

    <!DOCTYPE html>
    <html>
      <head>
        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.jsa/15.7.2/prop-types.min.js"></script>
        <script src="https://unpkg.com/@progress/kendo-date-math/dist/cdn/js/kendo-date-math.js"></script>
        <script src="https://unpkg.com/@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
        <script src="https://unpkg.com/@progress/kendo-licensing/dist/index.js"></script>
        <script src="https://unpkg.com/@progress/kendo-react-intl/dist/cdn/js/kendo-react-intl.js"></script>
        <script src="https://unpkg.com/@progress/kendo-react-all/dist/cdn/js/kendo-react-all.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material/dist/all.css">
      </head>
      <body>

        <div id="mydiv"></div>
        <script type="text/babel">
        const data = [1, 2, 3, 5]
        const Chart = window.KendoReactAll.Chart
        const ChartArea = window.KendoReactAll.ChartArea
        const ChartSeries = window.KendoReactAll.ChartSeries
        const ChartSeriesItem = window.KendoReactAll.ChartSeriesItem
        
        const ChartContainer = () => (
          <Chart>
            <ChartArea background="#eee" margin={30} />
            <ChartSeries>
              <ChartSeriesItem data={data} name="Fibonacci" />
            </ChartSeries>
          </Chart>
        );
        
        ReactDOM.render(<ChartContainer />, document.getElementById('mydiv'))
        </script>

      </body>
    </html>

4

1 回答 1

1

此剪辑失败的原因是在 kendo-react-all 库中找不到 ChartArea、ChartSeries 和 ChartSeriesItem。您需要导入 kendo-react-chart.js。

https://unpkg.com/@progress/kendo-react-charts/dist/cdn/js/kendo-react-charts.js

此外，您需要将源模块从更改window.KendoReactAll为window.KendoReactCharts

最后它应该是这样的：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.jsa/15.7.2/prop-types.min.js"></script>
    <script src="https://unpkg.com/@progress/kendo-date-math/dist/cdn/js/kendo-date-math.js"></script>
    <script src="https://unpkg.com/@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
    <script src="https://unpkg.com/@progress/kendo-licensing/dist/index.js"></script>
    <script src="https://unpkg.com/@progress/kendo-react-intl/dist/cdn/js/kendo-react-intl.js"></script>
    <script src="https://unpkg.com/@progress/kendo-react-all/dist/cdn/js/kendo-react-all.js"></script>
    <script src="https://unpkg.com/@progress/kendo-react-charts/dist/cdn/js/kendo-react-charts.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material/dist/all.css">
  </head>
  <body>

    <div id="mydiv"></div>
    <script type="text/babel">
    const data = [1, 2, 3, 5]
    const Chart = window.KendoReactCharts.Chart
    const ChartArea = window.KendoReactCharts.Chart
    const ChartSeries = window.KendoReactCharts.ChartSeries
    const ChartSeriesItem = window.KendoReactCharts.ChartSeriesItem
    
    const ChartContainer = () => (
      <Chart>
        <ChartArea background="#eee" margin={30} />
        <ChartSeries>
          <ChartSeriesItem data={data} name="Fibonacci" />
        </ChartSeries>
      </Chart>
    );
    
    ReactDOM.render(<ChartContainer />, document.getElementById('mydiv'))
    </script>

  </body>
</html>

于 2021-12-17T23:15:34.330 回答