ReactJS第二天

组件

生成组件的格式 - createClass

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

使用组件的方式

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

给组件传值 - this.props

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

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

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

        var RenderList = React.createClass({ render: function() {
            return (
                <ol>
                { 
                    React.Children.map(
                        this.props.children,
                        function(child) { 
                            return <li>{child}</li>;
                        }
                    )
                }
                </ol>
            )
        }
        });
        ReactDOM.render(
        <RenderList>
            <span>第一行</span>
            <span>第二行</span>
        </RenderList>,
        document.querySelector('#tpl') );

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