React中JSX语法的详解

落日映苍穹つ 2023-07-11 11:03 20阅读 0赞

### 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'));