react学习

1.用react做显示隐藏

<!DOCTYPE html>
<html>
  <head>
    <title>react学习</title>
    <script type="text/javascript" src="../bower_components/react/react.js"></script>
    <script type="text/javascript" src="../bower_components/react/react-dom.js"></script>
    <script type="text/javascript" src="../bower_components/babel/browser.js"></script>
    <style type="text/css">
        .div{
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
  </head>
  <div id="container"></div>
    <script type="text/babel">
        class Comp extends React.Component{
            constructor(...args){
                super(...args);
                this.state={display:'block'};
            }
            
            fn(ev){
                this.setState({display:this.state.display==='block'?'none':'block'});
            }
            render(){
                return <div>
                    <button onClick={this.fn.bind(this)}>点击显示隐藏</button>
                    <div className="div" style={{display:this.state.display}}></div>
                </div>
            }
        }
        
        var oDiv=document.getElementById('container');

        ReactDOM.render(
            <Comp/>,
            oDiv
        )
    </script>
</html>

2.用react做数组遍历

var names=['张飞','孙权','关羽','刘备'];
ReactDOM.render(
    <ul>
        {
            names.map(function(el){
                return <li key={el}>你好！ {el}!</li>
            })
        }
    </ul>,
    document.getElementById('container')
)

 

posted @ 2017-05-09 16:16  陆漫漫  阅读(253)  评论(0)  编辑  收藏  举报