zoukankan      html  css  js  c++  java
  • ReactJs条件判断的四种形式

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>ReactJs</title><script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
    <div id="example"></div>
    <script type="text/babel">
    // 条件判断的四种形式
    //======== 1 (三目运算符)=======
    // var HelloWorld = React.createClass({
    // render:function () {
    // return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
    // }
    // });

    //======= 2 (函数形式)==========
    // var HelloWorld = React.createClass({
    // getName: function () {
    // if(this.props.name)
    // return this.props.name
    // else
    // return "world"
    // },
    // render: function(){
    // var name = this.getName();
    // return <p>Hello,{name}</p>;
    // }
    // });
    // ReactDOM.render(
    // <HelloWorld name="launch"/>,
    // document.getElementById('example')
    // );

    //函数调用也是一种表达式
    //====== 3 =========
    // var HelloWorld = React.createClass({
    // getName: function () {
    // if(this.props.name)
    // return this.props.name
    // else
    // return "world"
    // },
    // render: function(){

    // return <p>Hello,{this.getName()}</p>;
    // }
    // });
    // ReactDOM.render(
    // <HelloWorld name="launch"/>,
    // document.getElementById('example')
    // );

    //======= 4 (比较运算符)========
    var HelloWorld = React.createClass({
    render: function(){

    return <p>Hello,{this.props.name || "World"}</p>;
    }
    });
    ReactDOM.render(
    <HelloWorld name="launch"/>,
    document.getElementById('example')
    );
    </script>
    </body>
    </html>

    未来的你会感谢现在努力的你
  • 相关阅读:
    mysql 5.7修改密码
    使用zfs进行pg的pitr恢复测试
    什么是构造函数?它和普通函数的区别?
    匿名函数和普通函数的区别
    http缓存机制
    全局变量和局部变量
    什么是web语义化?
    ajax状态值和状态码
    如何理解MVVM?
    如果理解&&运算符和各类数值的布尔值
  • 原文地址:https://www.cnblogs.com/cjxblogs/p/7244695.html
Copyright © 2011-2022 走看看