尝试将组件/ prop传递给父组件时收到错误

Question

我有新的反应，所以这可能是初学者的错误。

这是我正在处理的代码：https://github.com/tylerehc/hrs/

它在该版本中运行正常 - 也就是说，浏览器呈现＆＃39; hello cow＆＃39;。

但是，当我尝试使用第二个组件并传入道具时，我收到此错误：

我试图通过替换

来传递道具

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')
)