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