子组件上不存在Reactjs，Typescript - 属性

Question

我正在使用带有React的typescript 2.3.4。 我收到错误TS2339：错误TS2339：属性'name'在类型'Readonly <{children？：ReactNode; }>＆Readonly <{}>'。 当我尝试在子组件中声明属性时发生错误。 如何在子组件中正确引用该属性？

由于某种原因，代码没有在脚本运行器中执行。

任何帮助表示赞赏。

 export interface person { name: string; age: number; } interface State { personArray: person[]; } interface Props { } class ProfileData extends React.Component<{}, person> { public render() { return ( <section> <section> <h3>profile 1</h3> <div>{this.props.name}</div> </section> </section> ) } } export class Profile extends React.Component<Props, State> { public state: State; public props: Props; constructor(props: Props){ super(props); this.state = { personArray: [ { name: 'bazaaa', age: 42 }, { name: 'louis', age: 24 } ] }; } public render() { let profile1 = this.state.personArray[0]; return ( <ProfileData name={profile1.name} /> ) } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

Answer 1

您忘记在ProfileData类定义中将name声明为React属性。 这样的事情应该有效：

class ProfileData extends React.Component<{name: string}, person> {