Я получаю сообщение об ошибке при попытке передать компонент/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.prop в this.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') 
)