ES5与ES6小结部分

2018-01-26  本文已影响0人  兰夏天

等价 import React from ' react';

var Root =React.createClass({
      render :function(){ 
             return <h1>hello world{this.props.name}</h1>;
} 
) ;

ReactDOM.render(
<Root name=''哈哈‘’/>,
document.getElementById('example')
)
等价

class Root extends  React.Component{
          render(){
             return <h1>hello world{this.props.name}</h1> 
}
}

ReactDOM.render(
<Root name=''哈哈‘’/>,
document.getElementById('example')
)

<div id="example"></div>


    <script type="text/babel">
        class Root extends React.Component{
            render(){
                return(<ol>{
                            this.props.children.map(function(child){
                                   return <li>{child}</li>
                                })
                        } </ol>)


            }
        }
        ReactDOM.render(
                <Root>
                  <span> 第一个节点 </span>
                  <span> 第一个节点 </span>
                </Root>,
                document.getElementById('example')

        )
    </script>

补充,注意子节点一定太多余1个的时候才是一个数组,才能用map 函数,否则会报错

上一篇 下一篇

猜你喜欢

热点阅读