Dynamic Binding by JSX

先回想一下在 React Component 中附加屬性的方法：


方法一:

    let myHead=React.createElement(MyHead, {level:3});
    
方法二:

    let myHead=<MyHead level="3"/>;


Dynamic Binding

讓我們直接來看 code 吧

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>My Component</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <style type="text/css">
            .head{font-size: 24px;font-weight: bold;}
        </style>
        <script type="text/babel">
            //設計組件類別
            class MyHead extends React.Component
            {
                render(){
                    //return React.createElement("div", {className:"head", style:{color:this.props.color}}, "Hello World" + this.props.level);
                    return <div className="head" style={{color:this.props.color}}>Hello World {this.props.level}</div>;  
                }
            }
            class MyHeadList extends React.Component{
                render(){
                    return  <div>
                                <MyHead level="1" color="red"/>
                                <MyHead level="2" color="green"/>
                                <MyHead level="3" color="blue"/>
                            </div>;
                }
            }
            window.addEventListener("load", ()=>{
                //1. 建立自訂的React組件實體
                let myHead = <MyHeadList/>; // React.createElement(MyHeadList, null);

                //2. 將建立好的React組件實體畫到容器中
                ReactDOM.render(myHead, document.body);
            })
        </script>
    </head>
</html>

重點部分如下:

    class MyHead extends React.Component
            {
                render(){
                    //return React.createElement("div", {className:"head", style:{color:this.props.color}}, "Hello World" + this.props.level);
                    return <div className="head" style={{color:this.props.color}}>Hello World {this.props.level}</div>;  
                }
            }


使用 JSX 可以直接在對應的位置使用動態綁定，如上圖可以直接在 Hello World 後直接抓取傳入的參數 {level:3}，並使用this.props.level 綁定並顯示在畫面上。同理 this.state 也可以綁定。


CSS style by JSX

    class MyHead extends React.Component
            {
                render(){
                    //return React.createElement("div", {className:"head", style:{color:this.props.color}}, "Hello World" + this.props.level);
                    return <div className="head" style={{color:this.props.color}}>Hello World {this.props.level}</div>;  
                }
            }


特別留意如果要使用 css ，例如上方 Sample 中 div 的 head，要使用的是 className，系統會直接使用上方 style tag 中定義的 .head style.

另外 style 也可以綁定一個 style 物件，像是 {color:"red"}。這個範例就只是多使用 this.props.color 做動態綁定，改成 {color:this.props.color}而已


小結

回顧上面我們知道 JSX 的動態綁定以及與 css 的對應關係。


Refernece