React父子組件不起作用

Question

我試圖從React中的父組件訪問信息，但不斷收到錯誤。 React似乎無法理解imageUrl和用戶名是另一個組件的一部分。請幫忙！

這裏是我的代碼：

var USER_DATA = { 
 
\t name: 'Ayaz Uddin', 
 
\t username: 'ayaz2589', 
 
\t 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({ 
 
\t render: function() { 
 
\t \t return <img src={this.props.imageUrl} style={{ height: 100, width: 100}} /> 
 
\t } 
 
}); 
 

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

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

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

 
ReactDOM.render(
 
\t <Avatar user={USER_DATA} />, 
 
\t 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與所做的更改。