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を宣言するのを忘れました。このようなものはうまくいくはずです：

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