React中的JSX語(yǔ)法

1、基本概念：

React 使用 JSX 來替代常規(guī)的JavaScript。

JSX 是按照 XML 語(yǔ)法規(guī)范 的 JavaScript  語(yǔ)法擴(kuò)展。

JSX 語(yǔ)法的本質(zhì)：并不是直接把 JSX 渲染到頁(yè)面上，而是內(nèi)部先轉(zhuǎn)換成了 createElement 形式，再渲染的。

2、 JSX 的優(yōu)點(diǎn)：

• JSX 執(zhí)行更快，因?yàn)樗诰幾g為 JavaScript 代碼后進(jìn)行了優(yōu)化；
• 它是類型安全的，在編譯過程中就能發(fā)現(xiàn)錯(cuò)誤；
• 使用  JSX 編寫模板更加簡(jiǎn)單快速。

3、JSX語(yǔ)法基礎(chǔ)：

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

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

在JSX創(chuàng)建DOM的時(shí)候，所有節(jié)點(diǎn)必須有唯一的根元素進(jìn)行包裹；

在JSX語(yǔ)法中，標(biāo)簽必須成對(duì)出現(xiàn)，如果是單標(biāo)簽，則必須自閉和；

代碼示例：

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

使用組件化開發(fā)代碼示例：

App.js 組件文件代碼

import React from 'react';

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

export default App;

在其他文件中使用 JSX 語(yǔ)法引用組件：

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

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

4、JSX的應(yīng)用：

渲染數(shù)字

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 ? '結(jié)果為真' : '結(jié)果為假'}</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'));

渲染標(biāo)簽對(duì)象

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

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

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

渲染數(shù)組

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

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

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

將普通數(shù)組轉(zhuǎn)為 JSX 數(shù)組，并渲染到頁(yè)面中

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

方法一：

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

//原數(shù)組
const arr = ['html','css','vue'];
//新數(shù)組
const newArr = [];
//forEach()方法沒有返回值
arr.forEach((item,index) => {
    const temp = <h3 key={index}>{item}</h3>
    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';

//原數(shù)組
const arr = ['html','css','vue'];

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