【React】React 基础

已于 2024-09-08 11:26:46 修改
阅读量583 收藏 1
点赞数 1
分类专栏： React 及其周边生态 文章标签： react.js 前端 前端框架
于 2023-11-19 19:43:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiugongHao/article/details/134494358
版权

1. 搭建环境

npx create-react-app react-basic-demo

# 项目启动
npm start

2. 基本使用

JSX 语法将 html 和 js 写在一起。插值语法使用{}识别 JavaScript 中的表达式，比如基本数据类型常量、变量、函数调用、方法调用等，可以写在标签内容或者标签属性。

if、switch、变量声明等属于语句，不是表达式，不能写在 {} 内部。可以使用函数封装或者三元表达式。

const flag = true
return <div>
    {flag && <p>hello</p>}
    {flag ? <p>你好</p> : <p>再见</p>}
</div>

或者用函数封装：

function Hello() {
    if (flag) return <p>你好</p>
    else return <p>再见</p>
}

return <Hello></Hello>

非要在 {} 里面使用 引用类型，可以将其序列化再使用。

// jsx 标签数组在return 时会自动展开
const arr = [
        (<p>hello</p>),
        (<h1>REACT</h1>)
]
// ...
    return (
        <div>
            Hello World
            {arr}
        </div>
    );

在这里插入图片描述

  • 首字母小写 - HTML tag
  • 首字母大写 - 自定义组件

JSX 里的标签必须是闭合的，<input> <br> 这样写在 JSX 会报错（在 HTML 中不会报错），必须闭合 <input/>

每一段 JSX 只能有一个根节点，或者使用 <></> （ Fragment ）

属性和 HTML 属性基本一样，但有些和 JS 关键字冲突了：

  • class 要改为 className
  • style 要写成 JS 对象（不能是 string），key 采用驼峰写法
  • for 要改为 htmlFor

列表渲染使用 map 。

image.png

事件绑定用；on + 事件名称 = { 事件处理函数/程序 }

小驼峰命名法

image.png
事件回调函数中可传形参 e 是该事件。

image.png

传递自定义参数时，直接使用传递参数的函数就成了函数的直接调用。

需要将事件绑定的位置改为箭头函数的写法。也就是将函数的调用作为返回值去使用。

image.png

image.png

想支持泛型函数可能会报错，因为他把<T>，理解成了是一个元素<div>，纠正泛型<T,>即可。

注意 TS 的写法

function clickHandler(event: React.MouseEvent<HTMLParagraphElement>) {
    event.preventDefault()
    console.log('clicked')
}

return <p onClick={clickHandler}>hello world</p>

如果要想传递参数，可以通过如下方式

  import type { MouseEvent } from 'react';

  function clickHandler(event: React.MouseEvent<HTMLParagraphElement>, x: string) {
    event.preventDefault()
    console.log('clicked', x)
  }

  return (
    <p onClick={(e: React.MouseEvent<HTMLParagraphElement>) => clickHandler(e, 'hello')}>
        hello world
    </p>
  )

PS：Event handlers must be passed, not called! onClick={handleClick}, not onClick={handleClick()}.

return 返回值要用()括起来（除非返回值只有一行）。

并且返回值中只能返回一个根元素。（可以使用<></>或<Fragment></Fragment>作为最外层的根元素，其中 Fragment 可以写遍历循环中id的值）。

在这里插入图片描述

jsx 语法的本质是调用了 React.createElement 方法。createElement(type, props, ...children) 

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    '你好'
  );
}

  • type：type 参数必须是一个有效的 React 组件类型，例如一个字符串标签名（如 ‘div’ 或 ‘span’），或一个 React 组件（一个函数式组件、一个类式组件，或者是一个特殊的组件如 Fragment）。

  • props：props 参数必须是一个对象或 null。如果你传入 null，它会被当作一个空对象。创建的 React 元素的 props 与这个参数相同。注意，props 对象中的 ref 和 key 比较特殊，它们 不会 作为 element.props.ref 和 element.props.key 出现在创建的元素 element 上，而是作为 element.ref 和 element.key 出现。

  • 可选 …children：零个或多个子节点。它们可以是任何 React 节点，包括 React 元素、字符串、数字、portal、空节点（null、undefined、true 和 false），以及 React 节点数组。

React 无法通过 return false 来阻止默认行为，只能通过 e.preventDefault() 来阻止默认行为。

    const handleSubmit  = (e) => {
        // e.preventDefault()
        console.log('click submit')
    }
    return (
        <form onSubmit={handleSubmit}>
            <button type="submit">Submit</button>
        </form>
    );

e.nativeEvent 用来获取原生事件对象。

3. 组件

进行数据类型检查：proptypes

function

React 中，一个组件就是一个首字母大写的函数。

image.png

传参：
<form onSubmit={ handleSubmit('arg')}>

直接传参相当于函数的直接调用，可以改为箭头函数。

function App() {
    const handleSubmit  = (arg, e) => {
        e.preventDefault()
        console.log(arg)
    }
    return (
        <form onSubmit={e => handleSubmit('arg', e)}>
            <button type="submit">Submit</button>
        </form>
    );
}

class

此外，还有类组件。

import React from "react";
class App extends React.Component {
    handleClick() {
        console.log('click')
    }

    render() {
        return (
            <button onClick={this.handleClick}>Click</button>
        )
    }
}

但是这样如果在 handleClick 方法内使用this 就会存在 找不到this的情况，this 值为 undefined。所以我们可以有以下几种方式修正它：

  • 改为箭头函数（事件绑定时或者触发的回调函数时）
    handleClick= ()=> {
        console.log(this)
    }

或者是：

<button onClick={() => this.handleClick()}>Click</button>
  • 使用 bind 提前绑定 this 的指向
    constructor() {
        super();
        this.handleClick = this.handleClick.bind(this)
    }

传参 的两种形式：

  • 箭头函数
  • bind
      // <button onClick={ this.handleClick.bind(this, 'arg') }>Click</button>
      <button onClick={e => this.handleClick('arg')}>Click</button>

响应式修改数据：

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            num: 1
        }
    }

    handleClick = () => {
        this.setState({
            num: this.state.num + 1
        })
    }

    render() {
        return (
            <>
                {this.state.num}
                <button onClick={this.handleClick}>state ++</button>
            </>
        )
    }

}

如果同时多个 setState 修改，由于 setState 是异步的，所以结果就是只被修改了一次：

handleClick = () => {
        this.setState({
            num: this.state.num + 1
        })
        this.setState({
            num: this.state.num + 1
        })
        this.setState({
            num: this.state.num + 1
        })
    }

以下写法可以解决这个问题(虽然存在回调地狱)：

    handleClick = () => {
        this.setState({
            num: this.state.num + 1
        },()=> {
            this.setState({
                num: this.state.num + 1
            }, ()=> {
                this.setState({
                    num: this.state.num + 1
                })
            })
        })

    }

或者这种写法也可以：

    handleClick = () => {
        // 返回值为对象，需要用()括起来，否则默认是函数体
        this.setState((cur)=> ({
            // cur 是上次的值 等价于 this.state
            num: cur.num + 1
        }))
        this.setState((cur)=> ({
            num: cur.num + 1
        }))
        this.setState((cur)=> ({
            num: cur.num + 1
        }))
    }

如果要改变状态的代码是处于某个 html 元素的事件中，则它是异步的，否则就是同步的

    handleClick = () => {
        this.setState({
            num: this.state.num + 1
        })
        console.log(this.state.num, 'num')
    }

所以以上代码先执行同步代码console.log(this.state.num, 'num')，然后执行异步代码num: this.state.num + 1。

4. useState

useState 向组件中添加状态变量

image.png
状态是只读的，不可以直接修改

image.png
对于对象类型的状态变量，应该传递一个新的对象来更改

image.png
需要对象展开，并重新赋值，进行增加或者修改。

如果需要删除，则使用 filter。

import { useState } from "react";

function App() {
  const [arr, setArr] = useState([
    { id: 1, name: 'zhangsan' },
    { id: 2, name: 'lisi' },
    { id: 3, name: 'wangwu' }
  ]);
  const content = arr.map((item, index) => {
    return <li key={item.id}>{item.name}</li>
  })
  const deleteVar = () => {
      setArr(arr.filter(item => item.name !== 'zhangsan'))
  }
  return (
    <>
      <ul>
        {content}
      </ul>
      <button onClick={deleteVar}>点击删除zhangsan</button>
    </>
  )
}

export default App

案例小总结

// 创建 react 实例
const root = ReactDOM.createRoot(document.getElementById('root'));
// 渲染根组件 <React.StrictMode> 为严格模式
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 函数式组件 - 一个函数就是一个组件
import {Fragment, useState} from "react";

function App() {
    // const divContent = '标签内容'
    const divTitle = '标签标题'

    const flag = true
    let divContent = null

    const list = [
        {id: 1, name: 'a'},
        {id: 2, name: 'b'},
        {id: 3, name: 'c'}
    ]
    // 列表渲染，看清楚 这里返回用的是 () 哦
    const listContent = list.map(item => (
        // 存在多个跟标签，且需要 key 时
        <Fragment key={item.id}>
            <li>{item.name}</li>
            <li>-----------</li>
        </Fragment>
    ))

    // 直接将 js 和 html 混写
    if (flag) {
        divContent = <span>flag为true</span>
    } else {
        divContent = <span>flag为false</span>
    }
    // 类似于 vue 响应式的数据状态更新机制
    // 不能直接渲染对象数据，只能渲染其属性
    const [content,setContent] = useState('默认内容')
    const [data, setData] = useState({
        name: 'xx',
        age: 13
    })
    const handleClick = (e) => {
        console.log('点击了按钮',e)
        setContent('新内容')
        // 不能局部修改，而是直接替换，将展开对象写在最前面
        setData({
            ...data,
            age: 18
        })
    }
    return (
        // 只能返回一个根元素 可以使用空标签<></>
        <>
            {/* {} 动态属性(内容) 如果是{""}则为静态属性(内容) */}
            <div title={divTitle}>
                {divContent}
            </div>
            <ul>{listContent}</ul>
            {/* onClick 默认格式 */}
            <button onClick={handleClick}>触发事件</button>
            <div>
                {content} - {data.name} - {data.age}
            </div>
        </>
    );
}

export default App;

5. 修改样式

function App() {

  const dataObj = {
    className: "small",
    style: {
      width: "200px",
      height: 200,
      background: 'grey'
    }
  }
  return (
    <>
      <div>
        {/* {} 一个是本身react 的语法 另一个是代表一个全是css 键值的对象 可以写成多种形式 */}
        {/*<img src={logo} alt="" className="small" style={{width: 100, height: '100px', backgroundColor: 'lightcyan'}}/>*/}
        <img src={logo} alt=""  {...dataObj} />
      </div>
    </>
  )
}

{…dataObj} 是 react 的特殊写法，与ES6中的展开运算法不是一回事。

function App() {
  const imgStyleObj = {
    width: "200px",
    height: 200,
    background: 'grey'
  }
  return (
    <>
      <div>
        <img src={logo} alt="" className="small" style={imgStyleObj} />
      </div>
    </>
  )
}

image.png

可以使用 classnames 这个库方便进行 动态控制 class 类名

多个类名：

image.png

6. 获取 DOM

image.png

渲染 html（类似于 Vue 中的 v-html）

在 vue 中渲染 html或者 svg 需要使用 v-html，而在react 中需要：

<div dangerouslySetInnerHTML={{__html: captcha}}></div>

captcha 这里是包含一段 html 的代码片段字符串。

7. 组件通信

父传子 - props

function Article(props) {
    return (
        <div>
            <h2>{props.title}</h2>
            <p>{props.content}</p>
            <p>状态： {props.active ? '显示' : '隐藏'}</p>
        </div>
    )
}
// 使用 defaultProps 设置默认值，当没有父组件的值传入时使用默认值
Article.defaultProps = {
	title: '默认title',
	content: '默认content'
	// ...
}

function App() {

    return (
        <>
            <Article title="标题1" content="内容1" active/>
            <Article title="标题2" content="内容2"/>
        </>
    );
}

export default App;


// 设置默认值也可以写为，作为类的一个静态属性：
static Article.defaultProps = {
	title: '默认title',
	content: '默认content'
	// ...
}

父传子 - 插槽

function Article({children, title, footer=<div>默认底部</div>}) {
    return (
        <>
            <h1>{title}</h1>
            <div>
                {children}
            </div>
            {footer}
        </>
    )
}

function App() {

    return (
        <>
            <Article title="文章1" footer={<p>这是底部内容1</p>}>
                <h2>标题1</h2>
                <p>内容1</p>
            </Article>
            <Article title="文章2" footer={<p>这是底部内容2</p>}>
                <h2>标题2</h2>
                <p>内容2</p>
            </Article>
        </>
    );
}

export default App;

在这里插入图片描述

子传父 - 自定义事件

子传父 => 状态提升

import {useState} from "react";

function Detail({onActive}) {
    const [status, setStatus] = useState(false)

    function handleClick() {
        setStatus(!status)
        onActive(status)
    }

    return (
        <div>
            <button onClick={handleClick}>点击</button>
            <p style={{
                display: status ? 'block' : 'none'
            }}>Detail 的内容</p>
        </div>
    )
}

function App() {
    const handleActive = (status) => {
        console.log(status)
    }

    return (
        <>
            {/* 父组件接收子组件通过自定义事件 */}
            <Detail
                onActive={handleActive}
            />
        </>
    );
}

export default App;

多层级通信 - useContext

官方文档：useContext

用法：

  1. createContext 创建一个上下文对象 MyContext 并返回
  2. 组件内传递。可以通过将上下文对象 MyContext 传给 useContext() 来读取上下文的值（比如下面的 2 ）
    在这里插入图片描述
  3. 组件间传递。在顶层组件 MyContext.Provider 组件提供数据，在底层组件 useContext 钩子获取消费数据
import {createContext, useContext, useState} from "react";

function Section({children}) {
 	// 2.  顶层组件 MyContext.Provider 组件提供数据
    const level = useContext(LevelContent)
    return (
        <section className="section">
            {/*逐渐从上层提供的LevelContext中取值*/}
            <LevelContent.Provider value={level + 1}>
                {/*children 也就是 heading 需要使用 useContext*/}
                {children}
            </LevelContent.Provider>
        </section>
    );
}

function Heading({children}) {
	// 3. 底层组件 useContext 钩子获取消费数据
    const level = useContext(LevelContent)
    switch (level) {
        case 1:
            return <h1>{children}</h1>;
        case 2:
            return <h2>{children}</h2>;
        case 3:
            return <h3>{children}</h3>;
        case 4:
            return <h4>{children}</h4>;
        case 5:
            return <h5>{children}</h5>;
        case 6:
            return <h6>{children}</h6>;
        default:
            throw Error('未知的 level：' + level);
    }
}
//  1. createContext 创建一个上下文对象
const LevelContent = createContext(0)

function App() {
    return (
        <Section>
            <Heading>主标题</Heading>
            <Section>
                <Heading>副标题</Heading>
                <Heading>副标题</Heading>
                <Heading>副标题</Heading>
                <Section>
                    <Heading>子标题</Heading>
                    <Heading>子标题</Heading>
                    <Heading>子标题</Heading>
                    <Section>
                        <Heading>子子标题</Heading>
                        <Heading>子子标题</Heading>
                        <Heading>子子标题</Heading>
                    </Section>
                </Section>
            </Section>
        </Section>
    )
}

export default App;

在这里插入图片描述

组件通信小案例 - 汇率转换：

App.jsx

import React, {Component} from 'react';
import Money from "./components/Money";

class App extends Component {
    state = {
        dollar: '',
        rmb: ''
    }
    transformToRMB = (value) => {
        if (parseFloat(value) || value === "" || parseFloat(value) === 0) {
            this.setState({
                dollar: value,
                rmb: value === "" ? "" : (value * 7.3255).toFixed(2)
            })
        } else {
            alert('请输入数字')
        }
    }
    transformToDollar = (value) => {
        if (parseFloat(value) || value === "" || parseFloat(value) === 0) {
            this.setState({
                dollar:  value === "" ? "" : (value / 7.3255).toFixed(2),
                rmb: value
            })
        } else {
            alert('请输入数字')
        }
    }

    render() {
        return (
            <div>
                <Money text="美元" money={this.state.dollar} transform={this.transformToRMB}/>
                <Money text="人民币" money={this.state.rmb} transform={this.transformToDollar}/>
            </div>
        );
    }
}

export default App;

Money.jsx

import React from 'react';

function Money(props) {
    const handleChange = (e) => {
        // 将子组件的值传递给父组件 e.target.value 获取输入框的值
        props.transform(e.target.value)
    }
    return (
        <>
            <fieldset>
                <legend>{props.text}</legend>
                <input type="text" value={props.money} onChange={handleChange}/>
            </fieldset>
        </>
    );
}

export default Money;

在这里插入图片描述

受控组件，本质上其实就是将表单中的控件和视图模型(状态)进行绑定，之后都是针对状态进行操作。

案例：

  • 一个基本的受控组件
  • 对用户输入的内容进行限制
  • 文本域
  • 单选与多选框
  • 下拉列表

8. useEffect

useEffect 在组件中创建由渲染本身引起的操作（如发送 Ajax 请求，更改 DOM 等），即非用户操作。

副作用函数随着依赖项的触发而执行。

image.png
清理副作用一般在组件卸载时执行

useEffect(() =>{
  // 实现副作用逻辑
  return ()=> {
  // 清除副作用逻辑
  }
}, [] )

import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from "react";



function App() {
    const [count, setCount] = useState(0)
    const handleIncrement = ()=>setCount(count + 1)
    const handleDecrement = ()=>setCount(count - 1)
    useEffect(() => {
        console.log('useEffect')
    }, [count]);

    return (
        <>
            <div style={{ padding: 10}}>
                <button onClick={handleIncrement}>+</button>
                <span> {count} </span>
                <button onClick={handleDecrement}>-</button>
            </div>
        </>
    );
}

export default App;
小秀_heo
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
React基础
exialym的博客
10-22 2024
HTML模板 React主要是两个库： react.js是核心库 react-dom.js 是提供与 DOM 相关的功能 还有一个Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，JSX是可以将HTML直接写在JS里的语言，这一步通常不在浏览器端进行，而是通过babel配合React的babel插件预先转码好。 $ babel src --out-dir b
React基础入门
donglize521521的博客
09-24 3660
React系列二 - 核心JSX语法一 React系列二 - 核心JSX语法二 React系列三 - 阶段案例练习
react基础教程
冷月心的博客
01-14 5706
react基础教程
react基础文件.zip
06-04
"react基础文件.zip"可能包含一系列学习React基础的资源，如代码示例、教程文档等。让我们深入探讨React的基础知识。 1. **React组件**：React的核心概念是组件，它是可重用的代码块，可以独立渲染HTML到DOM。组件...
react-foundation：基础作为React组件
02-04
React + Foundation 为的组件。 演示版 动机 功能丰富且易于定制。 另一方面，由于它的简单性， 非常棒。 当与和结合使用时，它会更加。 在使用React和Foundation构建了许多应用程序之后，我们注意到我们正在重复...
cloud-react:数云平台版 PC端 react 基础组件
04-09
cloud-react 一套数云风格的 PC 端 React 组件库，服务于数云的的 PC 端 React 开发的产品中。 使用 安装 使用 npm 或 yarn 安装 npm i cloud-react -S yarn add cloud-react --save 示例 // 引入样式 import 'cloud...
react 基础学习
01-15
React 基础学习 React 是一个由Facebook 开发的开源 JavaScript 库，用于构建用户界面。下面是 React 基础学习的相关知识点： 一、React 简介 React 是一个基于组件的 JavaScript 库，用于构建用户界面。它可以...
React Native 基础学习笔记.rar
01-28
这个“React Native基础学习笔记”很可能是对这一跨平台开发技术的详细讲解和实践经验的汇总。React Native的核心理念是“Learn once, write anywhere”，即开发者只需掌握一次React的语法和概念，就能在iOS和...
react 中three.js 模型渲染
Mr_wuying的博客
09-03 542
/PointLight（点光源） 或 SpotLight（聚光灯） 这两种光源可以照亮模型的大部分区域，但是它们的效果通常受限于光源的位置和范围。// AmbientLight 环境光 环境光环境光是最简单的一种光源，它均匀地照亮场景中的所有物体，没有方向性。//HemisphereLight 半球光 半球光提供来自两个方向的光照，通常用于模拟天空和地面的光照。这里有个问题是模型放的文件夹，在我这引用的时候，我是放到了public文件下，引用的时候就是./ 放在其他文件下 会有问题。
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 957
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
React——forwardRef 转发组件引用
weixin_45705239的博客
09-03 690
请注意，在大多数情况下，推荐使用数据流（props 和 state）和高阶组件（HOCs）或者 hooks 来解决问题，而不是过度依赖。但是，有时候你可能需要在父组件中访问子组件中的 DOM 元素或者类组件实例，这就是。被用来获取对组件内部 DOM 节点或者组件实例的直接引用。默认情况下，你不能在函数组件上使用。是 React 提供的一个 API，它用于在函数组件中转发。这样可以保持组件之间的松耦合，并使得状态管理更可预测。创建一个组件时，它将接收。元素的实际 DOM 节点。在上面的代码示例中，
react文件详情
最新发布
m0_74358570的博客
09-04 407
react文件详情
React 更新界面
HHX_01的博客
09-03 1183
React 使得组件能够拥有内部状态并根据状态的变化来更新 UI。无论是单个组件的状态管理还是多个组件状态的独立性，React 都能有效地帮助你创建动态交互式界面。在 React 中，每个组件有自己的状态，更新状态时会导致组件重新渲染。在 React 中，界面的更新与状态管理密切相关。在 React 中，状态管理是动态更新界面的关键。在组件的 JSX 中，你可以使用当前的状态值来更新 UI。返回一个数组，其中包含当前的状态值和一个用于更新状态的函数。，它的状态不会影响其他组件。每个组件的状态是独立的。
React 备忘录 cheat sheet
zhtbs的博客
09-02 684
React 备忘录，学习与开发必用。
React 18+ TypeScript 实用开发进阶实战：‌《‌欢乐购》‌积累企业级前端项目实战经验
li3364207的博客
09-04 1104
React 18+ TypeScript 实用开发进阶实战：‌《‌欢乐购》‌积累企业级前端项目实战经验在当今的前端开发领域，‌React 和 TypeScript 的组合已成为许多企业级项目的首选技术栈。‌本文将通过一个名为《‌欢乐购》‌的电商项目，‌探讨如何利用 React 18 和 TypeScript 进行高效的前端开发，‌并积累宝贵的实战经验。‌一、‌项目背景与目标《‌欢乐购》‌是一个旨在提供丰富商品选择和优质购物体验的电商平台。‌项目要求构建一个响应式、‌高性能且易于维护的前端应用。
在react中要将页面跳转有动画
Mr_wuying的博客
09-03 339
react-transition-group 包住路由然后给样式 就可以达到页面跳转的时候样式动画。
React 应用中集成 Ace Editor
m0_61998604的博客
09-03 449
【代码】React 应用中集成 Ace Editor。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小秀_heo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值