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>

    未来的你会感谢现在努力的你
  • 相关阅读:
    Swagger介绍
    mybatis-plus常用操作
    [比赛][蓝桥杯] 第十一届蓝桥杯第二次省赛C++A组
    [题目][蓝桥杯PREV-14] 高僧斗法
    [题目][蓝桥杯PREV] 大合集
    [题目][APIO2009][蓝桥杯ALGO-44] 采油区域
    [题目][蓝桥杯ALGO] 大合集
    [题目][NOIP2001][蓝桥杯ALGO-25] Car 的旅行路线
    [题目][蓝桥杯ALGO-22] 数的划分
    [知识点] 1.5.3 运算符重载
  • 原文地址:https://www.cnblogs.com/cjxblogs/p/7244695.html
Copyright © 2011-2022 走看看