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