react學習

時間 2019-12-13

標籤 react 學習欄目 React 简体版

原文原文鏈接

1.用react作顯示隱藏javascript

<!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作數組遍歷css

var names=['張飛','孫權','關羽','劉備'];
ReactDOM.render(
    <ul>
        {
            names.map(function(el){
                return <li key={el}>你好！ {el}!</li>
            })
        }
    </ul>,
    document.getElementById('container')
)

1. react學習
2. react-router 學習
3. react redux 學習
4. react學習(二)
5. react context 學習
6. React學習
7. react 學習
8. React學習：context
9. React學習Day4
10. React 學習一
更多相關文章...
• 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
• 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
• Tomcat學習筆記（史上最全tomcat學習筆記）
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。