反应父子组件不起作用答案

【问题标题】：React Parent Child component not working反应父子组件不起作用
【发布时间】：2016-07-11 17:59:58
【问题描述】：

我正在尝试从 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

【问题讨论】：

类名有区别；你调用 profilePic 但定义的类是 ProfilePic，这是一个错字吗？

标签： reactjs components

【解决方案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 进行了更改。

【讨论】：