ReactJS学习笔记(二)-组件嵌套与组件复用

最新推荐文章于 2023-04-12 18:48:48 发布
最新推荐文章于 2023-04-12 18:48:48 发布
阅读量2.9k 收藏
点赞数
分类专栏： React点滴知识 文章标签： React

使用React来构建web应用，每个页面都将是多个组件组成，并且相互嵌套来构成的，接下来就学习下组件的嵌套。

一、组件嵌套：

背景交代： 
1、创建一个html，包含引用的相关js、需要被渲染的div； 
2、创建一个有label与input标签组成的简单组件 — IvanInput，并可以通过传入数组来渲染多组label与input标签，拥有不同的label名称、inputType、inputRef、inputName及input的onChange事件； 
3、创建一个button与a标签组成的简单组件 — IvanButton，并可以通过传入的数组来渲染一组button与啊标签，拥有不同的buttonName、button的onClick事件、a标签名称、a标签的onClick事件； 
4、创建一个IvanPage组件，包含一个h1标签、多个IvanInput组件、一个IvanButton组件。

1、创建一个html，名称随便起哈：

<!DOCTYPE html>
<html>
<head lang="en">
    <!--设置为utf-8防止中文乱码-->
    <meta charset="UTF-8">
    <title></title>
    <script src="../../dist/react/react.js"></script>
    <script src="../../dist/react/JSXTransformer.js"></script>
    <script src="../../dist/jquery/jquery.min.js"></script>
    <!--如下的这种引用方式是不正确的，必须使用上面的引用方式-->
    <!--<script src="../../dist/react/JSXTransformer.js"/>-->
    <!--自定义的js文件路径-->
    <script type="text/jsx" src="../../js/react/ivanPage.js"></script>
    <!--简单的样式可以忽略不计-->
    <style>
        body{TEXT-ALIGN: center;}
        #index-0329-0041{ MARGIN-RIGHT: auto;
            MARGIN-LEFT: auto;
            height:200px;
            width:400px;
            vertical-align:middle;
        }
    </style>
</head>
<body>
<!--需要被渲染的div，id与自定义的css样式一致即可-->
<div id="index-0329-0041"></div>
<script type="text/jsx">
    /*你的js代码块*/
</script>
</body>
</html>

2、创建一个js文件（步骤1中引用的IvanPage.js），并在js中创建IvanInput组件：

var IvanInput = React.createClass({
    //渲染DOM，相当于java的main函数
    render: function () {
        return (
            <div>
                <label>用户名:</label>
                <input type='text' ref='userName' name=userName onChange=this.textOnChange()/>
            </div>
        );
    }
});

为了使组件可以复用，并符合背景交代中的第二条，我需要将label名称、input标签的type、ref、name及onChange事件使用props参数的形式传递给IvanInput组件，更新上方代码为：

var IvanInput = React.createClass({
    //渲染DOM，相当于java的main函数
    render: function () {
        return (
            <div>
                <label>{this.props.labelName}:</label>
                <input type={this.props.inputType} ref={this.props.inputRef} name={this.props.inputName} onChange={this.props.onChangeMethod}/>
            </div>
        );
    }
});

如果想使用IvanInput组件，你就必须给我传递过来以下参数：labelName、inputType、inputRef、inputName、onChangeMethod(这是一个方法)，即：

React.render(
        <IvanInput labelName = '用户名' inputType='text' inputRef='userName' inputName='userName' onChangeMethod={方法}/>,
        document.getElementById('被渲染的id')
    );

3、同理，继续在此js文件中创建另一个组件IvanButton：

var IvanButton = React.createClass({
    render: function () {
        return (
            <div>
                <button onClick={this.props.buttonClickMethod} >{this.props.buttonName}</button>
                <a onClick={this.props.aHrefClick}>{this.props.aName}</a>
            </div>
        );
    }
});

如果要使用IvanButton组件，需要传递以下参数：buttonClickMethod(这是一个方法)、buttonName(button名称)、aHref(这是一个方法)、aName(a标签名称)，即：

React.render(
        <IvanButton buttonName='登录' buttonClickMethod={button的点击事件}
                            aName='忘记密码？' aHrefClick={a标签的点击事件}/>,
        document.getElementById('被渲染的id')
    );

4、继续在js中创建IvanPage组件，并对IvanInput及IvanButton两个组件进行调用：

根据2、3步骤中的调用方式，需要建立3个方法（onSubmit:button的点击事件、textOnChange:文本框方式变化事件、aHrefClick:a标签的onClick事件），同时希望h1标签的值是通过参数的方式传递过来的。

var IvanPage = React.createClass({
    //button的点击事件
    onSubmit:function(){
        console.log('onSubmit被点击了');
    },

    //文本框的点击事件
    textOnChange: function (e) {
        console.log('文本信息发生变化');
        //TODO 处理相关验证任务
    },

    //a标签的点击事件
    aHrefClick: function () {
        console.log('a标签被点击');
    },

    render: function () {
        return(
            <div>

                <h1>{this.props.titleName}</h1>
                <IvanInput labelName = '用户名' inputType='text' inputRef='userName' inputName='userName' onChangeMethod={this.textOnChange}/>
                <IvanButton buttonName='提交' buttonClickMethod={this.onSubmit}
                            aName='忘记密码?' aHrefClick={this.aHrefClick}/>
            </div>

        );
    }
});

调用IvanPage，并传递参数titleName，更新步骤1中的html代码如下：

<script type="text/jsx">
    /*你的js代码块*/
    React.render(
        <IvanPage titleName="登录页面" />,
        document.getElementById('index-0329-0041')
    );
</script>

运行下你的html文件吧，并点击“提交”、“忘记密码?”、文本框输入相关数值查看控制台输出吧，效果如下：

5、登录！登录！登录！特么就一个用户名搞啥子哟？对的，需要一个“密码”！由于密码与用户名的本质区别就是label与input不同，而我们的IvanInput组件只有label与input两个标签，并可以通过传递不同的参数来展示不同的DOM，那么问题就简单了，拷贝一份IvanInput的调用即可。 
更新IvanPage组件，重复调用IvanInput组件(参数不同)，还需要为密码框创建一个单独的点击事件pwdOnChange：

var IvanPage = React.createClass({
    //button的点击事件
    onSubmit:function(){
        console.log('onSubmit被点击了');
    },

    //文本框的点击事件
    textOnChange: function (e) {
        console.log('文本信息发生变化');
        //TODO 处理相关验证任务
    },

    //密码框的点击事件
    pwdOnChange: function (e) {
        console.log('密码信息发生变化');
        //TODO 处理相关验证任务
    },

    //a标签的点击事件
    aHrefClick: function () {
        console.log('a标签被点击');
    },

    render: function () {
        return(
            <div>
                <h1>{this.props.titleName}</h1>
                <IvanInput labelName = '用户名' inputType='text' inputRef='userName' inputName='userName' onChangeMethod={this.textOnChange}/>
                <IvanInput labelName = '密码' inputType='password' inputRef='userPwd' inputName='userPwd' onChangeMethod={this.pwdOnChange}/>
                <IvanButton buttonName='提交' buttonClickMethod={this.onSubmit}
                            aName='忘记密码?' aHrefClick={this.aHrefClick}/>
            </div>

        );
    }
});

运行下步骤1中的html文件，是不是多了个密码框？这才是登录页面嘛！

这里写图片描述

问题： 
虽然实现了组件的嵌套调用，但这样的IvanPage组件样式及内容已经完全固定，无法更改，这就没办法复用组件，改如何解决呢？

6、要解决上面提出的问题，就需要在最外层传递参数，也就是html里进行参数的传递，通过不同的参数来影响IvanPage页面的内容及样式信息。

  • 定义inputdata/otherdata数组，存放渲染IvanInput/IvanButton组件的必要参数信息，将inputdata与otherdata参数传递给IvanPage组件，更新html中的代码：
<script type="text/jsx">
    /*你的js代码块*/
    var inputdata = [
        {enable:false,labelName:'用户名',inputType:'text',inputRef:'userName',inputName:'userName',method:0},
        {enable:false,labelName:'密码',inputType:'password',inputRef:'userPwd',inputName:'userPwd',method:1}
    ];

    var otherdata = {buttonName:'登录',titleName:'登录界面',aName:'忘记密码?'};

    React.render(
            <IvanPage inputdata={inputdata} otherdata={otherdata}/>,
            document.getElementById('index-0329-0041')
    );
</script>
  • 接收传递的props数据，并存入state中，更新js中的IvanPage组件，加入初始化方法getInitialState，进行数据的接收，并分别命名为inputdata及otherdata：
getInitialState: function () {
        return {inputdata:this.props.inputdata,otherdata:this.props.otherdata}
    }
  • 遍历inputdata数组，进行批量渲染IvanInput组件，获取otherdata数组中的数据，并传递给IvanButton组件。
render: function () {
        {
            var onChangeMethod = [this.textOnChange,this.pwdOnChange];
            //优先生成多个Input组件
            var IvanInputs =  this.state.inputdata.map(function(d){
                return(
                    //查看官方文档，使用map时需定义一个key变量
                    <IvanInput key={d.inputType} labelName = {d.labelName} inputType={d.inputType} inputRef={d.inputRef}
                               inputName={d.inputName} onChangeMethod={onChangeMethod[d.method]}/>
                );
            });
        }
        return(
            <div>
                <h1>{this.state.otherdata.titleName}</h1>
                {IvanInputs}
                <IvanButton buttonName={this.state.otherdata.buttonName} buttonClickMethod={this.onSubmit}
                            aName={this.state.otherdata.aName} aHrefClick={this.aHrefClick}/>
            </div>

        );
    }

完整代码请见最后。。。 
至此，组件的嵌套就搞完了，其实也搞定了组件的复用，怎么复用这些组件呢？

二、组件的复用

可以使用如下的两种方式进行组件的复用： 
1、最简单的办法，就是在拷贝上面的html文件，更改html文件中的数组信息，即可实现组件的复用了，例如：

<!DOCTYPE html>
<html>
<head lang="en">
    <!--设置为utf-8防止中文乱码-->
    <meta charset="UTF-8">
    <title></title>
    <script src="../../dist/react/react.js"></script>
    <script src="../../dist/react/JSXTransformer.js"></script>
    <script src="../../dist/jquery/jquery.min.js"></script>
    <!--如下的这种引用方式是不正确的，必须使用上面的引用方式-->
    <!--<script src="../../dist/react/JSXTransformer.js"/>-->
    <!--自定义的js文件路径-->
    <script type="text/jsx" src="../../js/react/IvanPage-csdn.js"></script>
    <!--简单的样式可以忽略不计-->
    <style>
        body{TEXT-ALIGN: center;}
        #index-0329-0042{ MARGIN-RIGHT: auto;
            MARGIN-LEFT: auto;
            height:200px;
            width:400px;
            vertical-align:middle;
        }
    </style>
</head>
<body>
<!--需要被渲染的div，id与自定义的css样式一致即可-->
<div id="index-0329-0042"></div>
<script type="text/jsx">
    /*你的js代码块*/
    var inputdata = [
        {enable:false,labelName:'邮箱',inputType:'email',inputRef:'userEmail',inputName:'userEmail',method:0},
        {enable:false,labelName:'验证码',inputType:'text',inputRef:'authCode',inputName:'authCode',method:1}
    ];

    var otherdata = {buttonName:'找回密码',titleName:'找回密码',aName:'发送验证码'};

    React.render(
            <IvanPage inputdata={inputdata} otherdata={otherdata}/>,
            document.getElementById('index-0329-0042')
    );
</script>
</body>
</html>

运行效果如下：

这里写图片描述

2、通过相关事件来更改state中的参数值，ReactJS会自动的重新渲染整个页面完成组件的复用，那么就在a标签的点击事件中来简单的尝试一下吧！

更新IvanPage组件中的aHrefClick方法：

 aHrefClick: function () {
        console.log('a标签被点击');
        if(this.state.otherdata.aName == '忘记密码?'){
            var inputdata = [
                {enable:false,labelName:'邮箱',inputType:'email',inputRef:'userEmail',inputName:'userEmail',method:0},
                {enable:false,labelName:'验证码',inputType:'text',inputRef:'authCode',inputName:'authCode',method:1}
            ];

            var otherdata = {buttonName:'验证',titleName:'找回密码',aName:'发送验证码'};

            this.setState({inputdata:inputdata,otherdata:otherdata});
        }else{
            //TODO something
        }
    },

这时候点击登录页面的“忘记密码?”时，页面将被ReactJS重新渲染成一个新的DOM，就完成了组件的复用功能，是不是很屌的样子，其实人家ReactJS本来就很屌的。

3、完整代码：

  • html
<!DOCTYPE html>
<html>
<head lang="en">
    <!--设置为utf-8防止中文乱码-->
    <meta charset="UTF-8">
    <title></title>
    <script src="../../dist/react/react.js"></script>
    <script src="../../dist/react/JSXTransformer.js"></script>
    <script src="../../dist/jquery/jquery.min.js"></script>
    <!--如下的这种引用方式是不正确的，必须使用上面的引用方式-->
    <!--<script src="../../dist/react/JSXTransformer.js"/>-->
    <!--自定义的js文件路径-->
    <script type="text/jsx" src="../../js/react/ivanPage.js"></script>
    <!--简单的样式可以忽略不计-->
    <style>
        body{TEXT-ALIGN: center;}
        #index-0329-0041{ MARGIN-RIGHT: auto;
            MARGIN-LEFT: auto;
            height:200px;
            width:400px;
            vertical-align:middle;
        }
    </style>
</head>
<body>
<!--需要被渲染的div，id与自定义的css样式一致即可-->
<div id="index-0329-0041"></div>
<script type="text/jsx">
    /*你的js代码块*/
    var inputdata = [
        {enable:false,labelName:'用户名',inputType:'text',inputRef:'userName',inputName:'userName',method:0},
        {enable:false,labelName:'密码',inputType:'password',inputRef:'userPwd',inputName:'userPwd',method:1}
    ];

    var otherdata = {buttonName:'登录',titleName:'登录界面',aName:'忘记密码?'};

    React.render(
            <IvanPage inputdata={inputdata} otherdata={otherdata}/>,
            document.getElementById('index-0329-0041')
    );
</script>
</body>
</html>

ivanPage.js

 

/**
 * Created by ivan on 2016/3/31.
 */

/*
 定义组件（首字母比较大写），相当于java中的类的声明
 */
var IvanInput = React.createClass({
    //渲染DOM，相当于java的main函数
    render: function () {
        return (
            <div>
                <label>{this.props.labelName}:</label>
                <input type={this.props.inputType} ref={this.props.inputRef} name={this.props.inputName} onChange={this.props.onChangeMethod}/>
            </div>
        );
    }
});

var IvanButton = React.createClass({
    render: function () {
        return (
            <div>
                <button onClick={this.props.buttonClickMethod} >{this.props.buttonName}</button>
                <a onClick={this.props.aHrefClick}>{this.props.aName}</a>
            </div>
        );
    }
});

var IvanPage = React.createClass({
    //button的点击事件
    onSubmit:function(){
        console.log('onSubmit被点击了');
    },

    //文本框的点击事件
    textOnChange: function (e) {
        console.log('文本信息发生变化');
        //TODO 处理相关验证任务
    },

    //密码框的点击事件
    pwdOnChange: function (e) {
        console.log('密码信息发生变化');
        //TODO 处理相关验证任务
    },

    //a标签的点击事件
    aHrefClick: function () {
        console.log('a标签被点击');
        if(this.state.otherdata.aName == '忘记密码?'){
            var inputdata = [
                {enable:false,labelName:'邮箱',inputType:'email',inputRef:'userEmail',inputName:'userEmail',method:0},
                {enable:false,labelName:'验证码',inputType:'text',inputRef:'authCode',inputName:'authCode',method:1}
            ];

            var otherdata = {buttonName:'验证',titleName:'找回密码',aName:'发送验证码'};

            this.setState({inputdata:inputdata,otherdata:otherdata});
        }
    },

    getInitialState: function () {
        return {inputdata:this.props.inputdata,otherdata:this.props.otherdata,firstParam:'',secondParam:''}
    },

    render: function () {
        {
            var onChangeMethod = [this.textOnChange,this.pwdOnChange];
            //优先生成多个Input组件
            var IvanInputs =  this.state.inputdata.map(function(d){
                return(
                    //查看官方文档，使用map时需定义一个key变量
                    <IvanInput key={d.inputType} labelName = {d.labelName} inputType={d.inputType} inputRef={d.inputRef}
                               inputName={d.inputName} onChangeMethod={onChangeMethod[d.method]}/>
                );
            });
        }
        return(
            <div>
                <h1>{this.state.otherdata.titleName}</h1>
                {IvanInputs}
                <IvanButton buttonName={this.state.otherdata.buttonName} buttonClickMethod={this.onSubmit}
                            aName={this.state.otherdata.aName} aHrefClick={this.aHrefClick}/>
            </div>

        );
    }
});

转载：https://blog.csdn.net/yf275908654/article/details/51017755 

弹琴弹琴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React——组件的组合与交互
敲代码的小李同学的博客
07-03 456
React 中父组件与子组件方法、标签、值的传递。
react中组件复用时遇到的变量互相影响的bug
minamiyanastuki的博客
08-19 1630
假如有这样的需求： 一个父组件 循环出4个子组件。 每一个子组件有初始变量比较复杂 这里用inputVal模拟该情况并且不需要该变量(inputVal)实时响应式更新,因此我们没有把他设置成状态(没有使用useState) 然后需要我们在组件挂载时候将inputVal的值赋值给input输入框 当我们改变input输入框的时候会改变inputVal变量的值(从dom到数据的单项绑定) 然后我们获取当前C组件的inputVal值 代码如下 //父组件 import React ...
Vue组件之间的通信含父传子或者是子传父以及input中父子组件的双向绑定
xiangyizhixuexi的博客
06-15 374
父传子： 当父组件的数据需要传给子组件时，则要用到props这个属性，在组件申请中添加这个props，如：
Vue 子组件直接修改 props 中的属性值（单向数据流）
Microven
03-02 1万+
理论 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。 另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。 Vue3 Props 文档 尝试通过下面的方法直接修改属性值 this.$props.modelValue
React高阶组件实践
zxh2075的专栏
09-09 482
前言 React高阶组件，即Higher-Order Component，其官方解释是： A higher-order component is a function that takes a component and returns a new component. 一个传入一个组件，返回另一个组件的函数，其概念与高阶函数的将函数作为参数传入类似。 用代码来解释就是： const...
script type="text/JavaScript"是什么
热门推荐
Quest_sec的博客
04-09 3万+
在老版本html中 &lt;script type="text/javascript"&gt; 表明放在之间的是文本类型(text)。 javascript是告诉浏览器里面的text是个javascript脚本。 而 h5 以后，省略也不会出错，因为默认脚本语言就是js &lt;script&gt; &lt;/script&gt;...
React：通过嵌套对象循环
qq_38334677的博客
08-02 588
React：通过嵌套对象循环
react的map循环嵌套
hahahhahahahha123456的博客
08-14 1913
var btnType=Object.keys(obj).map((key,i)=&gt;{     var item=obj[key].map((s,index)=&gt;{       return (         &lt;button className={styles.btnType} key={index}&gt;{obj[key][index]}&lt;/button&gt;  ...
Cadence学习笔记1-原理图.pdf
11-16
Cadence学习笔记1-原理图.pdf
云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-基于ssm的云的学习笔记系统-ssm-java代码
02-06
zookeeper云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-云的学习笔记管理系统java代码-云的学习笔记系统设计与实现-基于ssm的云的学习笔记系统-基于Web的云的学习笔记系统设计与实现-...
go学习笔记-文档-文档
07-21
go学习笔记-文档
react 循环嵌套
liaorihua的博客
02-12 772
<div> <ul> {this.state.treeData.map(item => { var items = item.children.map(ite => { return ( <Checkbox checked={this.state.checked} onChange={this.onChange}>{ite.name}<
React 组件循环渲染问题
qq_56303170的博客
06-15 2337
React组件循环渲染问题
react循环渲染数据
qq_53939067的博客
11-22 2459
类似于vue里的v-for循环遍历渲染出数据，把后台传来的数据动态循环式的展示在页面上，
react开发前端登录、注册、找回密码页面的详细教程
徐同保的专栏
04-12 1792
光标自动定位到输入框、回车登录、图形验证码、邮箱验证码、60秒倒计时、字段校验、字段提示语、上传头像、密码显示隐藏这些功能都会在本文中详细介绍，【注意】使用的ui库是antd
react map 双重循环 嵌套循环
YAOYU007的博客
09-03 1万+
实现效果： 如图，数据是模拟后台输出的json，通过双重循环将数据放到侧边栏中 json数据如下 { "items":[ { "item": "BeJson", "menuItem": ["menu1","menu2","menu3"] }, { "item": "mary", "me
项目解析jsx文件_万字编程宝典耐心看，前端开发项目的JavaScript库中React详解
weixin_39985365的博客
12-20 275
学习是个吃苦的过程，而学编程那就是个更吃苦的事情，一个技术点需要上万的字来说明，一个实现页面需要上万的代码数据来凑，既然走上了这条路，愿大家无怨无悔，今天为大家带来了万字编程宝典中关于前端开发项目中javascript库中recact详解，你看或者不看，它就在这里。一、React是什么？React是一个声明式，高效且灵活的用于构建用户界面的JavaScript库。使用React可以将一些简...
node-v12.16.3-x86.msi
最新发布
04-25
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
openCV学习笔记----深入理解高斯滤波（二）
06-11
好的，你的第一个问题是关于 OpenCV 中的高斯滤波的学习笔记，对吧？没问题，我可以为您提供一些关于高斯滤波的深入理解。 高斯滤波是一种常用的图像滤波器，它可以平滑图像并降低噪声。它的基本思想是对图像中的每个像素周围的像素进行加权平均，以便消除噪声和细节。 高斯滤波器的核是一个二维高斯函数，它可以根据需要调整大小和方差。方差越大，滤波器的效果越弱，图像的细节越明显。相反，方差越小，滤波器的效果越强，图像的细节越模糊。 高斯滤波器可以使用 OpenCV 中的 `cv2.GaussianBlur()` 函数来实现。该函数需要三个参数：输入图像、核大小和标准差。核大小必须是正的奇数，标准差可以根据需要进行调整。 在使用高斯滤波器时，需要注意平衡平滑和保留图像细节之间的权衡。因此，使用合适的核大小和标准差非常重要，以便在滤波图像时达到最佳效果。 希望这些信息能够对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值