第二个React组件-评论框

自己实现的一个评论框，包含一个父组件和一个子组件，子组件通过调用父组件传递的函数来发送数据到父组件。

先看效果：

父组件架构：

var Comment = React.createClass({
	getInitialState: function() {
	    //设置用于存放评论内容的state
	},
	getComment: function(name, content) {  
		//用于从子组件获取评论
	},
	render: function() {
		return (
		    /******父组件内容******/
		    //嵌套子组件，传递父组件的函数给子组件作为属性
		    <CommentInput submitComment={this.getComment}></CommentInput>
		);
	}
});

子组件架构：

var CommentInput = React.createClass({
	handleSubmit: function() {
		//调用从父组件传过来的属性（一个函数）来传递评论内容
		this.props.submitComment(name, content);
	},
	render: function() {
		return (
		    //调用函数
			<button onClick={this.handleSubmit}>提交</button>
		);
	}
});

总结

1. 子组件向父组件传递消息：父组件传递函数作为子组件的一个属性，子组件调用这个函数，将数据以形参的方式发送到父组件。若传递的数据是对象的引用，那么父组件修改了对象，子组件中相应的对象也会变化。
2. 父组件向子组件传递消息：可以通过设置子组件属性的方式传递，传递的对象在子组件中是只读的。
3. word-wrap：设置当内容超过容器边界时是否断行，normal表示不换行，break-word表示换行（必要时单词也会被拆分）。
4. word-break：设置对象内文本的字内换行行为（keep-all兼容性不好）：

   normal：依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
   keep-all：与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
   break-all：该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。

5. white-space：设置对象内空格的处理方式：

   normal：默认处理方式。
   pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
   nowrap：强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
   pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
   pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

6. 设置JSX中标签的属性时，切记：

   1. 不能使用保留字，比如for要换成htmlFor，class要换成className；
   2. 使用小驼峰命名规则，比如contenteditable要写成contentEditable；
   3. 自定义的属性可以不适用小驼峰，但是尽量建议写成小驼峰。