如何将道具传递给孩子上课

Question

我试图将属性从父类传递给子类组件。但是在传递属性时，我在父类中遇到了错误。

我的代码段：

import * as React from 'react';
import './App.css';
import CartesianChart  from './chart/cartesian';
import Chart2 from './chart/chart2';

export interface IData {
  x: string;
  y: number;
  r: string;
}

export let data1: IData[] = [
  { x: 'Argentina', y: 505370, r: '100' },
  { x: 'Belgium', y: 551500, r: '118.7' },
  { x: 'Cuba', y: 312685, r: '124.6' },
  { x: 'Dominican Republic', y: 350000, r: '137.5' },
  { x: 'Egypt', y: 301000, r: '150.8' },
  { x: 'Kazakhstan', y: 300000, r: '155.5' },
  { x: 'Somalia', y: 357022, r: '160.6' }
];

class App extends React.Component {
  public render() {
    return (
      <div>
        <Chart2 data={data1}/>
        <CartesianChart data={data1}/>
      </div >
    );
  }
}
export default App;

我收到这样的错误消息

如何解决此问题？

谢谢。

Answer 1

检查父类道具的声明。

应该是这样

interface IProps {
  data: IData[]
}
class CartesianChart extends React.Component<IProps> {

}

Answer 2

将您的IData接口更改为类

export interface IData {
  x: string;
  y: number;
  r: string;
}

收件人

export class IData {
  x: string;
  y: number;
  r: string;
}