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