【React学习】JSX相关知识

1. JSX是什么？

在React框架中，JSX（JavaScript XML）文件是一种特殊的文件类型，它结合了JavaScript和XML（类似HTML）的语法，用于定义React组件的结构和内容。

JSX允许在JavaScript代码中编写类似HTML的标记，使得构建用户界面更加直观和易于理解。

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
        <p>This is a simple JSX component.</p>
      </div>
    );
  }
}

export default MyComponent;

2. JSX基本语法

• 元素的属性

花括号{}表示插值表达式，里面放js变量

<img src={this.state.imgUrl}/>

如果属性是固定值的话，就用引号引起来

<img src="xxxx.png"/>

• class

JSX中，需要用 className 代替 class

<p className="title">设置css class</p>

• style

定义一个js变量，用来保存样式，然后在元素的style属性中引用该变量

const styleData = {fontSize: '30px', color: 'blue'}
const styleElem = <p style={styleData}>123</p>

内联写法：外层大括号用于引用变量，内层大括号表示样式对象

const styleElem = <p style={{fontSize:'30px', color:'blue'}}>

• 原生 html
  必须在元素的属性dangerouslySetInnerHTML中传入html对象，对象的属性名必须是__html，才能在jsx文件中渲染出效果

const rawHtml = '富文本内容斜体加粗'
const rawHtmlData = {
	__html: rawHtml
}

const rawHtmlElem = <div>
    <p dangerouslySetInnerHTML={rawHtmlData}></p>
    <p>{rawHtml}</p>
</div>

rawHtmlElem的渲染效果：

• 加载组件
  直接把组件像标签一样写入，就可以加载了

<div>
	<p>JSX中加载一个组件</p>
	<List/>
</div>

3. JSX中的条件判断

• if else
  与Vue不同的是，React中不需要使用v-if v-else这一类的指令，直接使用if else即可

const blackBtn = <button className="btn-black">black btn</button>
const whiteBtn = <button className="btn-white">white btn</button>

if(this.state.theme === 'black'){
	return blackBtn
}else{
	return whiteBtn
}

• 三目运算符

<div>
	{this.state.theme === 'black' ? blackBtn : whiteBtn}
</div>

• 逻辑运算符 && ||
  严格相等运算符 === 的优先级是高于 逻辑与运算符 &&
&& 运算符返回它的第一个假值（falsey）操作数，如果所有操作数都是真值（truthy），则返回最后一个操作数。

下面代码中，如果 this.state.theme === 'black' 为真值，那么就返回变量 blackBtn 定义的元素

<div>
	{this.state.theme === 'black' && blackBtn}
</div>

4. JSX中的渲染列表

• map

map()方法传入一个函数，它作用于一个数组，返回一个新的数组，根据的传入函数的逻辑对原数组中每一个元素进行处理。

map()方法类似于 Vue 中的 v-for

使用map()进行渲染列表的时候，被渲染的列表的每一项必须添加属性。

import React from 'react'

class ListDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [
                {
                    id: 'id-1',
                    title: '标题1'
                },
                {
                    id: 'id-2',
                    title: '标题2'
                },
                {
                    id: 'id-3',
                    title: '标题3'
                }
            ]
        }
    }
    render() {
        return <ul>
            { /* vue v-for */
                this.state.list.map(
                    (item, index) => {
                        // 这里的 key 和 Vue 的 key 类似，必填，不能是 index 或 random
                        return <li key={item.id}>
                            index {index}; id {item.id}; title {item.title}
                        </li>
                    }
                )
            }
        </ul>
    }
}

export default ListDemo