React 组件类型错误问题

Question

我已经安装了 react 图表组件并将其导入到我的项目中。但是导入后出现如下错误：

对这个问题有任何帮助吗？ 我有以下代码：

import PropTypes from "prop-types";
import { connect } from "react-redux";
import React, { Component } from "react";
// import LineChart from 'react-chartjs';
// import { Sparklines, SparklinesBars } from 'react-sparklines';
import Chart from "react-google-charts";

class AnalyticsPage extends Component {
    render() {
        const data = [
            ["Year", "Visitations", { role: "style" }],
            ["2010", 10, "color: gray"],
            ["2020", 14, "color: #76A7FA"],
            ["2030", 16, "color: blue"],
            [
                "2040",
                22,
                "stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF"
            ],
            [
                "2050",
                28,
                "stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2"
            ]
        ];

        return (
            <div>
                Analytics
                <div>
                    <Chart chartType="BarChart" width="100%" height="400px" data={data} />
                </div>
            </div>
        );
    }
}

const AnalyticsPageWithRedux = connect()(AnalyticsPage);
export default AnalyticsPageWithRedux;

Answer 1

在您的渲染返回中，您只需提供“Analytics”，它本质上只是提供非实例化的 Analytics 类。像使用 Chart 一样使用 JSX

return (
        <div>
            <Analytics />
            <div>
                <Chart chartType="BarChart" width="100%" height="400px" data={data} />
            </div>
        </div>
    );

或者如果你想包装包含图表组件的 div：

return (
        <div>
            <Analytics>
                <div>
                    <Chart chartType="BarChart" width="100%" height="400px" data={data} />
                </div>
            </ Analytics>
        </div>
    );