React中的JSX语法

2025-02-15 技术教程

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 h2 = <h2>Hello React!</h2>;ReactDOM.render( <div> {h2} </div>, document.getElementById('root'));

渲染数组

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

将普通数组转为 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 = <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';//原数组const arr = ['html','css','vue'];ReactDOM.render( <div> {/* map()方法有返回值 */} {arr.map((item,index) => { return <h3 key={index}>{item}</h3> })} </div>, document.getElementById('root'));