React中JSX語法的詳解

1、基本概念：

React 使用 JSX 來替代常規的 JavaScript。

JSX 是按照 XML 語法規范 的 JavaScript 語法擴展。

JSX 語法的本質：並不是直接把 JSX 渲染到頁面上，而是內部先轉換成了 createElement 形式，再渲染的。

2、 JSX 的優點：

• JSX 執行更快，因為它在編譯為 JavaScript 代碼后進行了優化；
• 它是類型安全的，在編譯過程中就能發現錯誤；
• 使用 JSX 編寫模板更加簡單快速。

3、JSX語法基礎：

JSX 注釋：推薦使用 {/* 這是注釋 */}；

JSX中添加class類名：需要使用 className 來替代 class ；htmlFor 替代 label 的 for 屬性；

在JSX創建DOM的時候，所有節點必須有唯一的根元素進行包裹；

在JSX語法中，標簽必須成對出現，如果是單標簽，則必須自閉和；

代碼示例：

const mydiv = <div>這是一個Div標簽</div>;
ReactDOM.render(mydiv, document.getElementById('root'));

使用組件化開發代碼示例：

App.js 組件文件代碼

import React from 'react';

class App extends React.Component{
  render(){
    return (
      <div>
        {1+1}
        <hr/>
        Hello，Reactjs！！
      </div>
    );
  }
}

export default App;

在其他文件中使用 JSX 語法引用組件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

4、JSX的應用：

渲染數字

import React from 'react';
import ReactDOM from 'react-dom';

let a = 10;

ReactDOM.render(
    <div>{a}</div>
, document.getElementById('root'));

渲染字符串

import React from 'react';
import ReactDOM from 'react-dom';

let str = 'hello react';

ReactDOM.render(
    <div>{str}</div>
, document.getElementById('root'));

渲染布爾類型

import React from 'react';
import ReactDOM from 'react-dom';

let rel = true;

ReactDOM.render(
    <div>{rel ? '結果為真' : '結果為假'}</div>
, document.getElementById('root'));

渲染屬性值

import React from 'react';
import ReactDOM from 'react-dom';

let title = "this is a div";

ReactDOM.render(
    <div title={title}>Hello React</div>
, document.getElementById('root'));

渲染標簽對象

import React from 'react';
import ReactDOM from 'react-dom';

const h1 = <h1>Hello React!</h1>;

ReactDOM.render(
    <div>
        {h1}
    </div>
, document.getElementById('root'));

渲染數組

import React from 'react';
import ReactDOM from 'react-dom';

const arr = [
    <h1>第1行</h1>,
    <h2>第2行</h2>,
];

ReactDOM.render(
    <div>
        {arr}
    </div>
, document.getElementById('root'));

將普通數組轉為 JSX 數組，並渲染到頁面中

解決 Warning: Each child in a list should have a unique "key" prop.

方法一：

import React from 'react';
import ReactDOM from 'react-dom';

//原數組
const arr = ['html','css','vue'];
//新數組
const newArr = [];
//forEach()方法沒有返回值
arr.forEach((item,index) => {
    const temp = <h2 key={index}>{item}</h2>
    newArr.push(temp);
});

ReactDOM.render(
    <div>
        {newArr}
    </div>
, document.getElementById('root'));

方法二：

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import './style.css';

//原數組
const arr = ['html','css','vue'];

ReactDOM.render(
    <div>
    	{/* map()方法有返回值 */}
        {arr.map((item,index) => {
        return <h2 key={index}>{item}</h2>
        })}
    </div>
, document.getElementById('root'));