React入门教程（二）

React基础总结（续）

示例代码：

CommentBox = React.createClass({

displayName: 'CommentBox', 

render: function() {  

return (  

React.createElement('div', {className: "commentBox"},  

"Hello, world! I am a CommentBox."  )  

); }

});

ReactDOM.render(

React.createElement(CommentBox, null), 

document.getElementById('content')

);

解析：

React.createClass() 来创建一个新的 React 组件；

 render 方法：该方法返回一棵 React 组件树，这棵树最终将会渲染成 HTML，ReactDOM.render() 实例化根组件，启动框架，把标记注入到第二个参数指定的原生的 DOM 元素中；

 <div> 标签：不是真正的 DOM 节点；他们是 React div 组件的实例。

组件属性：

组件的属性可以在组件类的 this.props对象上获取，比如 name 属性就可以通过 this.props.name 读取。

让我们创建 Comment 组件，该组件依赖于从父级传入的数据。从父组件传入的数据会做为子组件的 属性（ property ） ，这些 属性（ properties ） 可以通过 this.props 访问到。使用属性（ props ），我们就可以读到从 CommentList 传到 Comment 的数据，然后渲染一些标记：

示例：

var Comment = React.createClass({ 

render: function() {  

return (  

<div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2>  

{this.props.children}  

</div> );

}

});

this.pros.children

this.props  对象的属性与组件的属性一一对应，但是有一个例外，就是  this.props.children  属性。它表示组件的所有子节点

注意：

this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法

参考资料：

http://www.ruanyifeng.com/blog/2015/03/react.html

http://reactjs.cn/react/docs/tutorial.html