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