ReactJS第二天

组件

生成组件的格式 - createClass

  var HelloMsg = React.createClass(
    render: function() {
      return HTML代码;
    }
  );

使用组件的方式

  ReactDOM.render(
    ,
    document.getElementById("渲染到目标DOM的ID")
  );

给组件传值 - this.props

• this.props对象的属性与组件的属性对应
• class属性要写成className
• for属性写成htmlFor

  var HelloMsg = React.createClass({
    render: function() {
      return 
这是一个{this.props.name}标签
;
    } 
  });
  ReactDOM.render(
    ,
    document.getElementById("渲染到目标DOM的ID")
  );

组件的子节点通过this.props.children获取

        var RenderList = React.createClass({ render: function() {
            return (
                

                { 
                    React.Children.map(
                        this.props.children,
                        function(child) { 
                            return 
{child}
;
                        }
                    )
                }
                
            )
        }
        });
        ReactDOM.render(
        
            第一行
            第二行
        ,
        document.querySelector('#tpl') );

• 组件没有子节点，this.props.children为undefined
• 组件只有一个子节点，this.props.children为Object
• 组件有多个子节点，this.props.children为Array