reactjs - 使用 react-chartjs-2 React 动态更改类型

Question

我在我的项目中使用 typescript ，我正在尝试更改图表类型，例如通过按钮。而 react-chartjs-2 的官方文档将类型声明为 const，因此 typescript 不会编译它。我应该做什么，如果真的不可能？

我的代码:

const Stats = () => {
    const [type, setType] = useState('bar');

    const data = {
      labels,
      datasets: [
        {
            // in offical docs
            // type: 'bar' as const,
            type: type,
            label: 'Dataset 1',
            borderColor: 'rgb(255, 99, 132)',
            borderWidth: 2,
            fill: false,
            data: randomArray(),
        },
        {
            type: type,
            label: 'Dataset 2',
            backgroundColor: 'rgb(75, 192, 192)',
            data: randomArray(),
            borderColor: 'white',
            borderWidth: 2,
        },
        {
            type: type,
            label: 'Dataset 3',
            backgroundColor: 'rgb(53, 162, 235)',
            data: randomArray(),
        },
      ],
    };

    return (
        <div>
            <Chart type='bar' data={data} />
            <Button onClick={ () => setType('line')}>Change type</Button>
        </div>
    );
};

Answer 1

你可以这样做，从 chart.js 中导入 ChartType 就像

import {ChartType} from 'chart.js'

然后将useState代码改成

const [type, setType] = useState<ChartType>('bar');

现在应该可以了