React 基礎_JSX

xuanxuanQueen發表於2019-11-13
ReactJS

JSX簡介

JSX是一種用於描述UI的JavaScript擴充套件語法，React使用這種語法描述元件的UI。

JSX語法

基本語法

JSX的基本語法和XML語法相同，都是使用成對的標籤構成一個樹狀結構的資料

    const element = (
        <div>
            <h1>Hello.world!</h1>
        </div>
    )
標籤型別
  • DOM型別標籤 (首字母必須小寫)
  • 元件型別標籤 (首字母必須大寫)
    //DOM型別標籤
    const element = <h1>hello,world!</h1>;
    //React元件型別標籤
    const element = <HelloWorld />;
    //二者可以互相巢狀使用
    const element = (
        <div>
            <HelloWorld />
        </div>;
    );
JavaScript表示式

在JSX中使用JavaScript表示式需要將表示式用大括號“{}”包起來

使用場景：

  • 透過表示式給標籤屬性賦值
  • 透過表示式定義子元件 
    //透過表示式給標籤屬性賦值
    const element = <MyComponent foo={1+2} />
    //透過表示式定義子元件(mao雖然是函式，但它的返回值是JavaScript表示式)
        const todos = ['item1', 'item2', 'item3'];
        const element = (
            <ul>
                {todos.map(message => <Item key={message} message={message} />}
            </ul>
        );
標籤屬性
  • 部分屬性名稱改變(class寫成className)
  • 事件屬性名採用駝峰格式(onclick寫成onClick)
    註釋

    JSX中的註釋需要用大括號“{}”將/**/包裹起來

    const element = (
    <div>
        {/* 這裡是一個註釋 */}
        <span>React</span>
    </div>
)

    JSX不是必須的

    JSX語法只是React.createElement(component, props, ...chilren)的語法糖，所有的JSX語法最終都會被轉換成這個方法的呼叫

    //JSX語法
const element = <div className='foo'>Hello,React</div>
//轉換後
const element = React.createElement('div', {className: 'foo'}, 'Hello,React')
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章