反应父子组件不工作

Question

我正在尝试从 React 中的父组件访问信息，但一直出现错误。 React 似乎不理解 imageUrl 和 username 是另一个组件的一部分。请帮忙！

这是我的代码：

var USER_DATA = {
 name: 'Ayaz Uddin',
 username: 'ayaz2589',
 image: 'https://scontent-lga3-1.xx.fbcdn.net/v/t1.0-9/1511676_10152124607269164_1288963176_n.jpg?oh=d725f8677a8369269e2ea65ffe9a3a63&oe=582CDD2C'
}

var React = require('react');
var ReactDOM = require('react-dom');

var ProfilePic = React.createClass({
 render: function() {
  return <img src={this.props.imageUrl} style={{ height: 100, width: 100}} />
 }
});

var ProfileLink = React.createClass({
 render: function() {
  return (
   <div>
    <a href={'http://www.github.com/' + this.props.username}>
     {this.props.username}
    </a>
   </div>
  )
 }
});

var ProfileName = React.createClass({
 render: function() {
  return (
   <div>{this.props.name}</div>
  )
 }
});

var Avatar = React.createClass({
 render: function() {
  return (
   <div>
    <profilePic imageUrl={this.props.user.image} />
    <profileName name={this.props.user.name} />
    <profileLink username={this.props.user.username} />
   </div>
  )
 }
})

ReactDOM.render(
 <Avatar user={USER_DATA} />, 
 document.getElementById('app')
);

这里是错误：

enter image description here

Answer 1

变化：

<profilePic imageUrl={this.props.user.image} />
<profileName name={this.props.user.name} />
<profileLink username={this.props.user.username} />

收件人：

<ProfilePic imageUrl={this.props.user.image} />
<ProfileName name={this.props.user.name} />
<ProfileLink username={this.props.user.username} />

这里是 fiddle 进行了更改。

反应父子组件不工作

React Parent Child component not working

components

reactjs