コンポーネント/ propを親コンポーネントに渡そうとするとエラーが発生する

Question

私は反応が新しく、これは初心者の間違いである可能性があります。

は、ここで私が働いている私のコードです：https://github.com/tylerehc/hrs/

それはそのバージョンで正常に実行さ - つまり、ブラウザは「ハロー牛」をレンダリングします。

私は第二の成分を使用し、小道具を渡すしようとすると、しかし、私はこのエラーが表示されます。

私は

return(<div>hello cow</div>); 

を置き換えることにより、支柱に渡ししようとしています

と

return(<ProfileHeader body='test' />); 

ProfileHeader.jsは次のようになります。

class ProfileHeader extends React.Component{ 
    render() { 
    return (<div>{this.prop.body}</div>); 
    } 
} 

ご協力いただければ幸いです。

Answer 1

あなたが名前を変更する必要がthis.propthis.propsへ

class ProfileHeader extends React.Component{ 
    render() { 
    return (<div>{this.props.body}</div>); 
    } 
} 

class Profile extends React.Component { 
    render() { 
    return(
     <div> 
     hello cow 
     <ProfileHeader body='hello' /> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <Profile />, document.getElementById('profile') 
)