尝试将 component/prop 传递到父组件时出现错误

Question

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

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

它在该版本中运行良好——也就是说，浏览器呈现 'hello cow'。

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

我正在尝试通过替换

来传递道具

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

尝试将 component/prop 传递到父组件时出现错误

I receive an error when trying to pass a component/prop into a parent component

javascript

reactjs

vagrant

components

prop