JSX語法和樣式的設置

時間 2019-12-06

標籤 jsx 語法樣式設置简体版

原文原文鏈接

1.JSX

JSX(JavaScriptXML)語法入門:css

JSX不是一門語言,是一個語法/語法糖
JSX標籤其實就是HTML標籤,在js中使用這些標籤時,不使用"",遇到HTML標籤(以<開始),就用HTML規則解析;遇到代碼塊(以{開始),就用js規則解析。
JSX語法瀏覽器沒法解析，需使用插件將其轉化爲js代碼
代碼更加直觀

JSX規範：html

首字母必須大寫
駝峯命名法
使用className與htmlFor 代替了class和for
組件與組件之間是能夠嵌套的
在JSX語法中是能使用求值表達式，不能使用語句(if,for,switch)
只有一個頂層標籤

例子react

<!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中設置樣式的三種形式

組件的樣式：bash

行內樣式：寫行內樣式時須要使用兩個{}，==> {{}}
對象樣式：在return前面定義一個樣式對象，與HTML寫法不一樣
css樣式

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

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

例子dom

<!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操做

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);
複製代碼

ref: 父組件引用子組件例： this.refs.name
key: 提升渲染性能，React經過key值判斷是否從新渲染