元素渲染

• ReactDOM

render接收兩個引數，一個jsX語法的節點模板，一個是渲染到那個元素物件上（會成為其子節點）

<script type="text/babel">
    const element = (
        <h1>hello React</h1>
    );
    ReactDOM.render(
        element,
        document.querySelector("#app")
    )
</script>

• 通過其他任何方式獲得jsx語法的模板給render函式即可：

<
 
script type="text/babel">
    function fn() {
    	//當然，通過變數返回也是可以的，多種多樣
        return <div>
                <h1>Hello React by return</h1>
            </div>
    }
    const element = fn();
    ReactDOM.render(
        element,
        document.querySelector("#app")
    )
<
 
/script>
//或者這樣，注意，return後面沒有東西就什麼都不返回了，直接結束，因為js沒有那麼嚴格的分號結束機制；
<script type="text/babel">
    function fn() {
        return (
            //js註釋
            <div>
                {/*jsx註釋*/}
                <h1>Hello React by return</h1>
            </div>
        )
    }

    const
 
 element = fn();
    ReactDOM.render(
        element,
        document.querySelector("#app")
    )
</script>

註釋

• 如果是在節點外，屬於js語法，在節點模板內，屬於jsx語法：

<script type="text/babel">
   const element = (
        //單行註釋
        /* 多行註釋 */
        <div>
            //單行註釋
            /* 多行註釋 */
            <h1>
            hello React
            </h1>
        </div>
        
    );
    ReactDOM.render(
        element,
        document.querySelector("#app")
    )
</script>

• 結合插值符號“{ }”寫註釋：

<script type="text/babel">
    const element = (
        //單行註釋
        /* 多行註釋 */
        <div>
            {
	            //單行註釋
	            /* 多行註釋 */
            }
            <h1>
            hello React
            </h1>
        </div>
        
    );
    ReactDOM.render(
        element,
        document.querySelector("#app")
    )
</script>

當然，為了好看，你可以格式化一下插值符號裡的註釋結構：

{/*單行註釋內容*/}
{//錯誤的註釋，斜槓會把後面的反大括號註釋掉，然後匹配到函式或者物件的反大括號造成錯誤}
{/*
多行註釋內容
* @Author: Ouyang 
* @Date: 2018-10-21 18:15:50 
* @Last Modified by:   Ouyang 
* @Last Modified time: 2018-10-21 18:15:50 
*/}

插值

• 利用插值符號：

<script type="text/babel">
    let person = {
        name:"小明",
        age:"18",
        sex:"男"
    }
    const element = (
        <div>
            <h2>姓名：{person.name}</h2>
            <h2>年齡：{person.age}</h2>
            <h2>性別：{person.sex}</h2>
        </div>
    );
    ReactDOM.render(
        element,
        document.querySelector("#app")
    )
</script>

• 在插值符號裡使用函式：

<script type="text/babel">
    var Person = function(name,age,sex) {
        this.name = name,
        this.age = age,
        this.sex = sex,
        this.getName = function(){
            return this.name
        },
        this.getSex = function() {
            return this.sex
        }
    }
    let newPerson = new Person("小紅","18","女");
    const element = (
        <div>
            <h2>姓名：{newPerson.getName()}</h2>
            <h2>年齡：{newPerson.age}</h2>
            <h2>性別：{newPerson.getSex()}</h2>
        </div>
    );
    ReactDOM.render(
        element,
        document.querySelector("#app")
    )
</script>

• 在插值符號裡使用三目運算子：

<script type="text/babel">
    var Person = function(name,age,sex) {
        this.name = name,
        this.age = age,
        this.sex = sex,
        this.getName = function(){
            return this.name
        },
        this.getSex = function() {
            return this.sex
        }
    }
    let newPerson = new Person("小紅","18",1);//有些後臺用0 1表示性別更加方便
    const element = (
        <div>
            <h2>姓名：{newPerson.getName()}</h2>
            <h2>年齡：{newPerson.age}</h2>
            <h2>性別：{newPerson.getSex()==1?"女":"男"}</h2>//完全可以插入三目運算子，但是可惜的是，這裡不能直接寫函式體，也不能用if判斷等
        </div>
    );
    ReactDOM.render(
        element,
        document.querySelector("#app")
    )
</script>

• 但是可以在插值符號裡寫閉包自執行函式：

<script type="text/babel">
    var Person = function(name,age,sex) {
        this.name = name,
        this.age = age,
        this.sex = sex,
        this.getName = function(){
            return this.name
        },
        this.getSex = function() {
            return this.sex
        }
    }
    let newPerson = new Person("小紅","18",1);
    const element = (
        <div>
            <h2>姓名：{newPerson.getName()}</h2>
            <h2>年齡：{newPerson.age}</h2>
            <h2>性別：{
                (function(sex) {
                    if(sex == 1){
                        return "女，1"
                    }else{
                        return "男，2"
                    }
                })(newPerson.getSex())
            }</h2>
        </div>
    );
    ReactDOM.render(
        element,
        document.querySelector("#app")
    )
</script>

這樣我們就可以根據需要將資料渲染到對應節點裡，而且通過函式等，不管是準備的靜態資料，還是請求的動態資料，都可以較好的渲染進元素裡！