React入门---JSX内置表达式-6

我的理解：接触的JSX就是在React中render方法里面的js，由于里面只能有一个节点，因此你写的东西都在一个div中，要有js因此经过JSX来表达。（我的菜鸟理解，欢迎指正）

 

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

 

1.在JSX中注释须要下载花括号中，语法  {/*注释*/}

2.在 JSX 中不能使用 if else 语句，但能够使用 conditional (三元运算) 表达式来替代。

例：

usermane不为空

render(){
        //usermane不为空
        var username="阿泽大大";
        return(
                <div>
                    <h1>这里是主体内容部分</h1>
                    {/*这是注释的格式*/}
                    {/*下面三元表达式*/} 
                    <p>{username=='' ? '用户未登陆' : '用户名:'+username}</p>
                </div>
            )
    }
    //运行结果 用户名:阿泽大大  （运行时和前面同样，经过http://localhost:8080运行，webpack-dev-server）

usermane不为空

render(){
        //usermane不为空
        var username="";
        return(
                <div>
                    <h1>这里是主体内容部分</h1>
                    {/*这是注释的格式*/}
                    {/*下面三元表达式*/} 
                    <p>{username=='' ? '用户未登陆' : '用户名:'+username}</p>
                </div>
            )
    }
    //运行结果 用户未登陆

3.布尔判断 true / false

例：

bool为真

render(){
        //bool为真
        var bool=true;

        return(
                <div>
                    <h1>这里是底部</h1>
                    {/*经过true/false来控制按钮是否被禁用; disabled={} 不用'',绑带动态属性时不用''*/}
                    <p><input type='button' value='默认按钮' disabled={bool}/></p>
                </div>
            )
    }
    //运行结果 按钮被禁用

bool为真

render(){
        //bool为假
        var bool=false;

        return(
                <div>
                    <h1>这里是底部</h1>
                    {/*经过true/false来控制按钮是否被禁用; disabled={} 不用'',绑带动态属性时不用''*/}
                    <p><input type='button' value='默认按钮' disabled={bool}/></p>
                </div>
            )
    }
    //运行结果 按钮正常使用

4.解析HTML

例：解析空格

render(){
        //声明一个html
        var html="HELLO WORLD";

        return(
                <div>
                    <h1>这是头部</h1>
                    <p>{html}</p>
                </div>
            );
    }
    //运行结果 HELLO&nbsp;WORLD 并无将&nbsp;解析为html的空格

解决方法1：对html的标记作Unicode转码 （http://tool.chinaz.com/）

render(){
        //声明一个html
        //进行了unicode转码( ---\u0020)
        var html="HELLO\u0020WORLD";

        return(
                <div>
                    <h1>这是头部</h1>
                    <p>{html}</p>
                </div>
            );
    }
    //运行结果 HELLO WORLD 完成html空格解析

解决方法2：使用参数dangerouslySetInnerHTML进行html解码

render(){
        //声明一个html
        //进行了unicode转码( ---\u0020)
        var html="HELLO WORLD";

        return(
                <div>
                    <h1>这是头部</h1>
                    {/*参数dangerouslySetInnerHTML 可能会形成XSS攻击*/}
                    <p dangerouslySetInnerHTML = {{__html : html}}></p>
                </div>
            );
    }
    //运行结果 HELLO WORLD 完成html空格解析

还有更多JSX的内置表达式：http://www.runoob.com/react/react-jsx.html