React-chartJS-2 在 TypeScript 中不起作用

Question

我试图使用chartjs和react-chartjs-2创建一个条形图。图表组件在javascript react中工作，但现在我需要在typescript中使用它，它返回一个错误:

TypeError: Comp is not a function

这是bar组件:

import { Chart as ChartJS} from 'chart.js/auto';
import { Bar } from 'react-chartjs-2';

export default function BarChart({product_data}:any) {
const bar_data = {
labels: ["Positive Reviews", "Neutral Reviews", "Negative Reviews"],
datasets: [{
label: "Number of reviews",
data: [product_data.pos_count,product_data.neut_count,product_data.neg_count],
backgroundColor: [
'rgba(75, 192, 192, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(75, 192, 192, 1)',
'rgba(255, 206, 86, 1)',
'rgba(255, 99, 132, 1)'
],
borderWidth: 0.5,
}]
}

return (
<Bar  data={bar_data} />
)
}

我安装了@types/chart.js和@types/react-chartjs-2，它仍然不工作，有人能帮助我吗?由于

Answer 1

React + TypeScript

你需要修改:

import { Chart as ChartJS} from 'chart.js/auto';

import 'chart.js/auto';

Answer 2

Chart.js自带类型，所以你需要卸载这两个类型包才能正常工作。

/JYWwDg9gTgLgBAcgMYAsCGsB0ArAzgejQFcYIEBuAWAChRJY4AlAUzSXgDMoIREpX2FGnWjwA3nABCGOAF84XHnwEwAtKgww8qgExDqNGswAe9eABNmHYgBtORAHbtgEB1IwBhdLAAUYsNzmROwA + uZoMGiyAFxoDgCeAJRwYobUcBlwSK648ABGGGERaHAAvCk0mVVwNmh5zDa40XAA2gBEAAoQuMAwwABuzEzM-cDMAO64bQA0cG0AcswkUGg2w6MTU7MLzADmEQNDLBuTbQC605XVGeGRuMwwTa2p6dfVtfU2zQtEIPVQcAgHDg-BOWyub0ytzQzRaAQgQVC0MwkFwIWyjhg03hiJgRUimAcSzxGIcWJxwTxyKJu3REExFwhkLgBSQAGtdtxHOYPBAbNBYUzmZkEFBdgUfAB2ACsswAjABOHTypWzAAMmB0iQQl1ewqq https://www.typescriptlang.org/play?代码ovFaB8OmlsrgOjVADZZgAOG1wDVanVC5mGiWm80KhXygDMysdmu1ruujL1zLy0EsUF5-KggvD + r4Rql5sVAfT8u1uqTBrFHrNs0tDvtWZdibd + eNntm3r9GeDFdDOf1kag0YA6sBzDAUM0NbKQ3IzkzZBC0hl + DAiFA3D5XQAeaQAuDQ0piApQfFROD4AB8V0SNFkQA