<react學習筆記(2)>JSX語法和樣式的設定

liangsheng0111發表於2018-12-03
React筆記JS

1.JSX

JSX(JavaScriptXML)語法入門:

  1. JSX不是一門語言,是一個語法/語法糖
  2. JSX標籤其實就是HTML標籤,在js中使用這些標籤時,不使用"",遇到HTML標籤(以<開始),就用HTML規則解析;遇到程式碼塊(以{開始),就用js規則解析。
  3. JSX語法瀏覽器無法解析，需使用外掛將其轉化為js程式碼
  4. 程式碼更加直觀

JSX規範：

  1. 首字母必須大寫
  2. 駝峰命名法
  3. 使用className與htmlFor 代替了class和for
  4. 元件與元件之間是可以巢狀的
  5. 在JSX語法中是能使用求值表示式，不能使用語句(if,for,switch)
  6. 只有一個頂層標籤

例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>react筆記</title>
        <script src="js/react.min.js"></script>
        <script src="js/react-dom.min.js"></script>
        <script src="js/browser.js"></script>
    </head>
    <body>
        <div id="demo1"></div>
        <script type="text/babel">
            var oDemo = document.getElementById("demo1"),
                Demo = React.createClass({
                    change(){
                        return "demo";
                    },
                    handleClick(){
                        alert(1);
                    },
                    render(){
                        //this指向整個元件
                        return <div className="demo" onClick={this.handleClick}>這是一個{this.change()}</div>
                    }
                });
                //渲染
                ReactDOM.render(<Demo/>, oDemo);
        </script>
    </body>
</html>
複製程式碼

2.JSX語法中的註釋

使用{/* */}註釋

<div id="demo2"></div>
<script type="text/babel">
    var oDemo = document.getElementById("demo2"),
        HelloWorld = React.createClass({
            render(){
                // 現在這裡是屬於js的部分,不屬於JSX語法的部分
                return (
                    <div className="box" // class名字>
                        {/*這是一個標題*/}
                        <h1 className="title">Hello World</h1>
                        {/*這是說明*/}
                        <p>你好世界！</p>
                        <div className="box2">你好</div>
                    </div>
                )
            }
        })
    ReactDOM.render(<HelloWorld/>, oDemo);
</script>
複製程式碼

3.JSX中設定樣式的三種形式

元件的樣式：

  1. 行內樣式：寫行內樣式時需要使用兩個{}，==> {{}}
  2. 物件樣式：在return前面定義一個樣式物件，與HTML寫法不同
  3. css樣式

注意事項：在HTML5中與在React中樣式書寫區別

  1. HTML5中是以分號";"結束，React中是以逗號","結束
  2. HTML5中屬性與值都不需要加上引號，React中key值使用駝峰命名，value值需要加上引號
  3. HTML5中設定帶數字的值需要加單位，React中直接寫數字

例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <script src="js/react.min.js"></script>
        <script src="js/react-dom.min.js"></script>
        <script src="js/browser.js"></script>
    </head>
    <body>
        <div id="demo3"></div>
        <script type="text/babel">
            var oDemo = document.getElementById("demo3"),
                HelloWorld = React.createClass({
                    render(){
                        var styles = {
                            color: 'blue',
                            fontSize: '30'
                        };
                        return (
                            <div className="box">
                                <h3 className="title" style={{color:'red',backgroundColor:'lime'}}>行內樣式</h3>
                                <p className="subtitle" style={styles}>物件樣式</p>
                                <p className="details">css樣式</p>
                            </div>
                        );
                    }
                });
            ReactDOM.render(<HelloWorld/>, oDemo);
        </script>
    </body>
</html>
複製程式碼

4.非DOM操作

  1. dangerouslySetInnerHTML: 在JSX中直接插入HTML程式碼，動態的新增HTML內容，由使用者新增需要使用屬性：__html
//demo4
<div id="demo4"></div>
    <script type="text/babel">
        var oDemo = document.getElementById("demo4");
            Demo = React.createClass({
            render:function(){
                var text = {
                    __html:'<span>我是在div中的span標籤</span>'
                };
                return (<div>
                    <div dangerouslySetInnerHTML={text}></div>
                </div>);
            }
        });
        ReactDOM.render(<Demo/>, oDemo);
複製程式碼
  1. ref: 父元件引用子元件 例： this.refs.name
  2. key: 提高渲染效能，React通過key值判斷是否重新渲染

相關文章