[英]Property … does not exist on type 'IntrinsicAttributes & …'
[英]Property 'property' does not exist on type 'IntrinsicAttributes'
我是 React Typescript 的初学者。 我目前正在研究如何在 React Typescript App 中使用 Chart.js 实现条形图。 所以我只想将属性datasets:
作为道具传递给 BarChart.tsx 组件。
所以这是我的 BarChart.tsx 组件:
import Chart from 'chart.js/auto';
import { Line } from 'react-chartjs-2';
import 'chartjs-adapter-luxon';
import StreamingPlugin from 'chartjs-plugin-streaming';
Chart.register(StreamingPlugin);
interface ChartProperty {
label: string;
backgroundColor: string;
borderColor: string;
borderDash?: number[];
cubicInterpolationMode?: string;
fill: boolean;
data: [];
}
interface Props {
property: ChartProperty[];
}
const BarChart: React.FC<Props> = ({property}) => {
return (
<div>
<Line
data={{
datasets: property,
}}
height={100}
width={400}
options={{
scales: {
x: {
type: 'realtime',
realtime: {
delay: 2000,
onRefresh: (chart) => {
chart.data.datasets.forEach((dataset) => {
dataset.data.push({
x: Date.now(),
y: Math.random(),
});
});
},
},
},
},
}}
/>
</div>
);
};
export default BarChart;
这是我的 App.tsx 组件:
import './App.css';
import BarChart from './components/BarChart';
const ChartProperty = [
{
label: 'Dataset 1',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgb(255, 99, 132)',
borderDash: [8, 4],
fill: false,
data: [],
},
{
label: 'Dataset 2',
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgb(54, 162, 235)',
cubicInterpolationMode: 'monotone',
fill: false,
data: [],
},
];
const App = () => {
return (
<div>
<h1 style={{ textAlign: 'center' }}>Sample Bar Chart</h1>
<BarChart property={ChartProperty} />
</div>
);
};
export default App;
但是在这里,当我尝试这个时,我在名为property
的 prop 中的<BarChart property={ChartProperty} />
中遇到错误。 所以这是我得到的错误:
TS2322: Type '{ property: ({ label: string; backgroundColor: string; borderColor: string; borderDash: number[]; fill: boolean; data: never[]; cubicInterpolationMode?: undefined; } | { label: string; backgroundColor: string; ... 4 more ...; borderDash?: undefined; })[]; }' is not assignable to type 'IntrinsicAttributes'.
Property 'property' does not exist on type 'IntrinsicAttributes'.
25 | <div>
26 | <h1 style={{ textAlign: 'center' }}>Sample Bar Chart</h1>
> 27 | <BarChart property={ChartProperty} />
| ^^^^^^^^
28 | </div>
29 | );
30 | };
在这种情况下有人可以帮助我吗? 如果有人能显示我的错误,我真的很感激。提前谢谢你。
你不能这样写: data: [];
. 正确: data: any[]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.