zoukankan      html  css  js  c++  java
  • React实例3-状态

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>nested components</title>
    <script src="build/browser.min.js"></script>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script type="text/babel">
    var MessageBox = React.createClass({
    getInitialState:function(){
    return {
    isVisible:true,
    titleMessage:'你好世界(来自state哦)'
    }
    },
    render:function(){
    var styleObj={
    display:this.state.isVisible?'block':'none'
    };

    return (
    <div>
    <h1 style={styleObj}>{this.state.titleMessage}</h1>
    <Submessage/>
    </div>
    );
    }
    });

    var Submessage = React.createClass({
    render:function(){
    return (
    <h3>React很有趣</h3>
    );
    }
    });

    ReactDOM.render(<MessageBox/>,document.getElementById('app'));
    </script>
    </head>

    <body>

    <div id="app"></div>
    </body>
    </html>

  • 相关阅读:
    CF163E e-Government
    P2336 [SCOI2012]喵星球上的点名
    数据结构
    数字逻辑
    建筑制图与识图
    建筑施工
    电力系统分析
    现代物流基础
    电子商务网站设计与管理
    数字电子技术基础
  • 原文地址:https://www.cnblogs.com/codepen2010/p/6850766.html
Copyright © 2011-2022 走看看