React Parent Child组件无法正常工作

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所做的更改。