React基础：map filter 钩子函数 setState antd网址 下拉框默认选中

已于 2024-08-10 11:12:46 修改
阅读量421 收藏 4
点赞数 3
分类专栏： 编程教程 文章标签： 前端
于 2024-07-27 20:28:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45883780/article/details/140740567
版权

antd（Ant Design）的访问路径

https://ant.design/index-cn

https://ant.design/components/overview-cn/

下载http和url路径的cmd命令

npm install http -g

npm install url -g

例子

使用map方法的更简洁方法

下拉框默认选中.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript" srcc="js/react.js" ></script>

<script type="text/javascript" srcc="js/react-dom.js" ></script>

<script type="text/javascript" srcc="js/browser.js" ></script>

</head>

<body>

<div id="myDiv"></div>

<!--<select >

<option value="1">点赞</option>

<option value="2">收藏</option>

</select>-->

<script type="text/babel">

//1、下拉框默认选中

class MyOption extends React.Component{

constructor(props){

super(props);

}

render() {

return <option value={this.props.cid}  selected={this.props.selected} >{this.props.cname}</option>

}

}

class MySel extends React.Component{

constructor(props){

super(props);

}



render() {

 const cityArr = [{id:1,name:'长沙'},{id:2,name:'湘潭'},{id:3,name:'株洲'}];

  //补全代码:设置湘潭为默认选中

const cityItems =cityArr.map(o =>(





<MyOption  key={o.id}

            cname={o.name} cid={o.id}   selected={o.name=='湘潭'?'selected':''}/>  )  );





//    o.id==2?<MyOption  key={o.id}

//          cname={o.name} cid={o.id}  selected="selected" /> :

// <MyOption  key={o.id}

// cname={o.name} cid={o.id}  /> 

//                                                      )  );

return (<select >{cityItems}</select>);



}

}

ReactDOM.render(< MySel />,document.getElementById('myDiv'));





// MyOption.defaultProps = {

// selected:"selected";

// };

// selected="selected"



//cityArr[1].push="selected";

//document.getElementsByTagName("option")[1];

//console.log(document.getElementsByTagName("option")[0])  

//console.log(<select  >{cityItems}</select>)

// console.log(<MyOption/> )

//var a=document.getElementsByTagName("option");

//console.log( [...a]);



//console.log(document.getElementById('湘潭'))



</script>

</body>







</html>

<MyOption  key={o.id} cname={o.name} cid={o.id}   selected={o.name=='湘潭'?'selected':''}/> 

<MyOption  key={o.id}
            cname={o.name} cid={o.id}   selected={o.name=='湘潭'?'selected':''}/>

下拉框默认选中2.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>



<script type="text/javascript" srcc="js/react.js" ></script>

<script type="text/javascript" srcc="js/react-dom.js" ></script>

<script type="text/javascript" srcc="js/browser.js" ></script>

</head>

<body>

<div id="myDiv"></div>



<script type="text/babel">

//1、下拉框默认选中



class MySel extends React.Component{

constructor(props){

super(props);

}



render() {

 const cityArr = [{id:1,name:'长沙'},{id:2,name:'湘潭'},{id:3,name:'株洲'}];

  //补全代码:设置湘潭为默认选中

const cityItems =cityArr.map(o =>(

<option key={o.id}  selected={o.name=='湘潭'?'selected':''}>{o.name}</option>

     )  );

return (<select >{cityItems}</select>);



}

}

ReactDOM.render(< MySel />,document.getElementById('myDiv'));





// MyOption.defaultProps = {

// selected:"selected";

// };

// selected="selected"



//cityArr[1].push="selected";

//document.getElementsByTagName("option")[1];

//console.log(document.getElementsByTagName("option")[0])  

//console.log(<select  >{cityItems}</select>)

// console.log(<MyOption/> )

//var a=document.getElementsByTagName("option");

//console.log( [...a]);



//console.log(document.getElementById('湘潭'))



</script>

</body>







</html>

map处理数组以及列表.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript" srcc="js/react.js" ></script>

<script type="text/javascript" srcc="js/react-dom.js" ></script>

<script type="text/javascript" srcc="js/browser.js" ></script>

<script type="text/babel">

// const data = ['红楼梦','水浒传','三国演义','西游记'];

// const books = data.map(b => <li key={b}>《{b}》</li>);

// ReactDOM.render(<ul>{books}</ul>,

// document.getElementById('app'));



//          const pros = [

//              {id: 1,pname: '巧克力',price: 8.5},

//              {id: 4,pname: '辣条',price: 3.5},

//              {id: 6,pname: '爆米花',price: 12}

//          ];

//          const proItems = pros.map(p => <tr key={p.id}>

//                                         <td>{p.id}</td>

//                                         <td>{p.pname}</td>

//                                         <td>￥{p.price}</td>

//                                         </tr>);

//          ReactDOM.render(<table border="1"><tbody>{proItems}</tbody></table>,

//              document.getElementById('app'));



            class ProItem extends React.Component{

            render(){

            //不能在这里添加key属性

            return (<tr>

                    <td>{this.props.pro.id}</td>

                    <td>{this.props.pro.pname}</td>

                    <td>{this.props.pro.price}</td>

                    </tr>);

            }

            }

            class ProList extends React.Component {

            render(){

            const pros = this.props.ps;

            const list = pros.map(p => <ProItem key={p.id} pro={p} />);

            return (<tbody>{list}</tbody>);

            }

            }

            const pros = [

                {id: 1,pname: '巧克力',price: 8.5},

                {id: 4,pname: '辣条',price: 3.5},

                {id: 6,pname: '爆米花',price: 12}

            ];

            ReactDOM.render(<table border="1"><ProList ps={pros} /></table>,

                document.getElementById('app'));

</script>

</head>

<body>

<div id="app"></div>

</body>

</html>

map和filter方法.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script>

//map,filter

let arr = [3,4,7,11,2];

//产生一个新的数组，数组中的元素刚好是arr数组的元素的平方

// let ar1 = [];

// for(let i = 0;i < arr.length;i ++) {

// let num = arr[i];

// ar1[i] = num * num; 

// }

let ar1 = arr.map(num => num * num);

console.log(ar1);



// let ar2 = [];

// for(let i = 0;i < arr.length;i ++) {

// let num = arr[i];

// if(num % 2 == 1) {

// ar2.push(num);

// }

// }

//          let ar2 = arr.filter(function(num){

//          //这个函数返回值是true，则当前的元素被保留到新数组中

//          //如果返回false，就不会被保留到新数组中

//          return num % 2 == 1;

//          });

            let ar2 = arr.filter(num => num % 2 == 1);

console.log(ar2);

//遍历each

arr.forEach(num => console.log(num));

</script>

</head>

<body>

</body>

</html>

setState方法.html

点击数字文本后会累计数字的效果

组件的生命周期函数（钩子函数）.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript" srcc="js/react.js" ></script>

<script type="text/javascript" srcc="js/react-dom.js" ></script>

<script type="text/javascript" srcc="js/browser.js" ></script>

<script type="text/babel">

class MyTag extends React.Component {

constructor(){

super();

//设置组件的初始字体大小为20px

this.state = {

fontSize: '20px',

color: 'red'

};

}

//当组件第一次加载到DOM中时，字体越变越大

componentDidMount(){

//每隔100毫秒就让字体变大一点

this.iv = setInterval(() => {

let ft = this.state.fontSize;

ft = parseInt(ft) + 5 + 'px';

this.setState({

fontSize: ft

});

},100);

}

//当组件被卸载的时候清除定时器

componentWillUnmount(){

if(this.iv) {

clearInterval(this.iv);

}

}

render(){

return (<div style={this.state}>{this.props.name}</div>);

}

}

ReactDOM.render(<MyTag name="中国" />,

    document.getElementById('app'));

</script>

</head>

<body>

<div id="app"></div>

</body>

</html>

map拼接列表.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript" srcc="js/react.js" ></script>

<script type="text/javascript" srcc="js/react-dom.js" ></script>

<script type="text/javascript" srcc="js/browser.js" ></script>

<script type="text/babel">

class ZuJian extends React.Component{

            render(){

           

            return (<tr>

                    <td>{this.props.pro.id}</td>

                    <td>{this.props.pro.pname}</td>

                    <td>{this.props.pro.price}</td>

                    </tr>);

            }

            }

            class ZuJian2 extends React.Component {

            render(){

            const pros = this.props.ps;

            const list = pros.map(p => <ZuJian key={p.id} pro={p} />);

            return (<tbody>{list}</tbody>);

            }

            }

            const pros = [

                {id: 1,pname: '诗书画唱',price: 7.7},

                {id: 2,pname: '三连',price: 8.8},

                {id: 3,pname: '关注',price: 9.9}

            ];

            ReactDOM.render(<table border="1"><ZuJian2 ps={pros} /></table>,

                document.getElementById('id2'));

</script>

</head>

<body>



<div id="id2"></div>

</body>

</html>

使用setState方法点击文本后发生数字累加.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript" srcc="js/react.js" ></script>

<script type="text/javascript" srcc="js/react-dom.js" ></script>

<script type="text/javascript" srcc="js/browser.js" ></script>

<script type="text/babel">

class ZuJian1 extends React.Component{

constructor(){

super();



this.state = {

num: 0

};



this.perform = this.perform.bind(this);

}



perform(){

let n = this.state.num;

n ++;



                    this.setState(function(s){

                    s.num = n;

                    return s;

                    });

}

render(){

return (<div onClick={this.perform} >{this.state.num}</div>);

}

}

ReactDOM.render(<ZuJian1 />,document.getElementById('id1'));

</script>

</head>

<body>

请点击数字文本：

<div id="id1"></div>

</body>

</html>

用map或filter生成新数组.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script>

//使用map方法生成新数组：

let arr = [7,6,9,8,10];



let arr1 = arr.map(num => num * num);

console.log(arr1);





//使用filter方法生成新数组：

let arr3 = [7,6,9,8,10];

            let arr2 = arr3.filter(num => num % 2 == 1);

console.log(arr2);



arr3.forEach(num => console.log(num));

</script>

</head>

<body>

</body>

</html>

用钩子函数实现放大文字的方法.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>



<script type="text/javascript" srcc="js/react.js" ></script>

<script type="text/javascript" srcc="js/react-dom.js" ></script>

<script type="text/javascript" srcc="js/browser.js" ></script>

<script type="text/babel">

class MyTag extends React.Component {

constructor(){

super();



this.state = {

fontSize: '6px',

color: 'blue'

};

}



componentDidMount(){



this.iv = setInterval(() => {

let ft = this.state.fontSize;

ft = parseInt(ft) + 5 + 'px';

this.setState({

fontSize: ft

});

},100);

}



componentWillUnmount(){

if(this.iv) {

clearInterval(this.iv);

}

}

render(){

return (<div style={this.state}>{this.props.name}</div>);

}

}

ReactDOM.render(<MyTag name="三连" />,

    document.getElementById('id1'));

</script>

</head>

<body>

<div id="id1"></div>

</body>

</html>

1、在REACTJS中创建一个学历下拉框组件.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>



<script type="text/javascript" srcc="js/react.js" ></script>

<script type="text/javascript" srcc="js/react-dom.js" ></script>

<script type="text/javascript" srcc="js/browser.js" ></script>

<script type="text/babel">

class ZuJian extends React.Component{

            render(){

return ( <option>{this.props.name}</option> );

            }

            }

            class ZuJian2 extends React.Component {

            render(){

            const arrObjectArr= this.props.arrObject;

            const data=arrObjectArr.map(o => <ZuJian key={o} name={o} />);

            return (<select>{data}</select>);

            }

            }

            

            const arr = ["高中","大学"];

            

/*下面的 arrObject={arr} 中的{arr}是拆分解构的过程，

一般看到{} 或[]就联想到解构   ,[...arr]   这只是一种语法糖，

一种规定的语法*/

            ReactDOM.render(<ZuJian2 arrObject={arr} />,

                document.getElementById('id2'));

</script>

</head>

<body>



<div id="id2"></div>

</body>

</html>

2、在REACTJS中创建一个省份下拉框组件.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>



<script type="text/javascript" srcc="js/react.js" ></script>

<script type="text/javascript" srcc="js/react-dom.js" ></script>

<script type="text/javascript" srcc="js/browser.js" ></script>

<script type="text/babel">

class ZuJian extends React.Component{

            render(){

return ( <option>{this.props.name}</option> );

            }

            }

            class ZuJian2 extends React.Component {

            render(){

            const arrObjectArr= this.props.arrObject;

            const data=arrObjectArr.map(o => <ZuJian key={o} name={o} />);

            return (<select>{data}</select>);

            }

            }

            

            const arr = ["江西省","湖南省"];

            



            ReactDOM.render(<ZuJian2 arrObject={arr} />,

                document.getElementById('id2'));

</script>

</head>

<body>



<div id="id2"></div>

</body>

</html>

3.实现当点击按钮时，页面上的div中的字体越变越大的效果。.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>



<script type="text/javascript" srcc="js/react.js" ></script>

<script type="text/javascript" srcc="js/react-dom.js" ></script>

<script type="text/javascript" srcc="js/browser.js" ></script>

<script type="text/babel">



class MyTag extends React.Component {

constructor(){

super();



this.state = {

fontSize: '6px',

color: 'blue'

};

}



handleClick(){



this.iv = setInterval(() => {

let ft = this.state.fontSize;

ft = parseInt(ft) + 5 + 'px';

this.setState({

fontSize: ft

});

},100);

}

/*在打开网站页面时自动调用componentDidMount，

在关闭网站页面时调用componentWillUnmount（防止setInterval一直运行，内存被占用）:*/

componentWillUnmount(){

if(this.iv) {

clearInterval(this.iv);

}

}

render(){

return (<div style={this.state}>{this.props.name}<input type="button" value="点击按钮" 

           onClick={this.handleClick.bind(this)} /></div> );

}



// handleClick(){

//alert("测试")

// }



}





ReactDOM.render(<MyTag name="三连" />,

    document.getElementById('id1'));

</script>

</head>

<body>

<div id="id1"></div>

</body>

</html>

MyTable.js

index.js


import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import 'antd/dist/antd.css';

import MyTable from './comp/MyTable';

import reportWebVitals from './reportWebVitals';



ReactDOM.render(

  <React.StrictMode>

    <MyTable />

  </React.StrictMode>,

  document.getElementById('root')

);



// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

诗书画唱
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd多选下拉框一行展示的实现方式
01-21
我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。 我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。 下面有2种方案来实现这...
详解React中setState回调函数
08-27
"详解React中setState回调函数" React中setState回调函数是React框架中的一种重要机制，用于更新组件的状态。setState函数是异步的，因此在使用时需要特别注意。下面将详细介绍setState回调函数的使用方法和注意...
react-ant-dropdown-menu:下拉菜单+基于antd的菜单
03-06
React物下拉菜单下拉菜单基于antd。安装npm install -S @jswork/react-ant-dropdown-menu特性姓名类型必需的默认描述班级名称细绳错误的-- menuOptions 形状错误的--用法导入css @import " ~@jswork/react-ant-...
e-admin-react:一个使用 react + antd + create-react-app 构建的 rbac 权限模型
05-06
一个使用 react + antd + mobx + create-react-app 构建的 rbac 权限模型 账号: admin 密码: 123456 npm 脚本 安装依赖 yarn 运行项目 yarn start 构建项目 // 默认打包路由为 history 模式 yarn run build:alpha ...
React：setState详解
01-02
react之setState遇到的坑、解释setState为什么是异步的、怎样变成同步setState。。。。。。
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 501
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 448
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 901
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
web开发
2301_76876837的博客
09-04 395
我们在访问的网站的时候，一般就是在浏览器的网址栏里输入，再敲个回车，我们就可以访问到我们想要的网站（比如京东）。这是为什么呢？我们访问的浏览器是一个程序，京东也是一个程序，只是京东在人家电脑上运行着，我们只是远程访问了人家的前端页面。我们根据下图来讲解一下web网站的工作流程：我们在浏览器输入我们想要查找的域名，回车（搜索）后，会到，前端服务器接受到请求后会把相对应的前端代码返回给浏览器，浏览器会自动解析前端代码（因为内置了解析引擎），展示出页面效果。前端代码里由一句代码会是访问。
使用Selenium WebDriver来检测网页上的坏链接
C'mon的博客
09-07 541
坏链接是指那些不可达的链接或URL，它们可能是由于某些服务器错误而导致无法访问。一个URL通常会有一个有效的状态码2xx。对于无效的请求，HTTP状态码是4xx（客户端错误）或5xx（服务器端错误）。我们通常需要点击链接来确认它是否工作，否则很难确定。
Nginx部署前端Vue项目
不会代码的小林
09-03 1322
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
springblade-JWT认证缺陷漏洞CVE-2021-44910
m0_73756016的博客
09-03 522
大概意思就是这个认证判断有个逻辑缺陷，就是在泄露的前端pack里面对于jwt的判断认证不够严谨，并且加密的TokenConstant.SIGN_KEY也泄漏了。直接搜索“请求未授权”，定位到认证文件：springblade/gateway/filter/AuthFilter.java。/api/blade-log/api/list接口中会泄漏账号密码，只要管理员登录过。/api/blade-user/user-list泄露了账号密码。然后直接访问接口：api/blade-log/api/list。
浅析前端数据埋点监控：用户行为与性能分析的桥梁
dsgdauigfs的博客
09-03 1046
总的来说，前端埋点技术不仅是提升用户体验和产品运行效率的利器，更是实现数据驱动决策的重要工具。随着各类专业工具的出现，如腾讯有数、百度统计和微软Clarity，企业可以根据需求选择最适合的工具进行数据分析和优化，从而在竞争激烈的市场中保持领先地位。通过深入理解用户行为和性能数据，企业能够做出更明智的决策，推动业务持续发展，实现长期成功。通过本文的介绍，希望能够帮助前端开发者和产品团队更好地理解数据埋点的重要性，掌握实施数据埋点的方法，从而在实际工作中发挥其最大的价值。努力的小雨。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 761
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
前端技术演进与未来发展趋势探究
最新发布
生活的真谛从来都不在别处 就在日常一点一滴的奋斗里
09-07 1393
本文深入探讨了前端领域的发展历程、主要技术及未来趋势。从前端技术的起源与早期发展，到动态页面的崛起，再到如今各种先进技术的涌现，我们见证了前端技术的不断演进。在发展历程方面，前端从最初的静态网页逐渐发展为复杂的动态交互界面。早期浏览器的竞争推动了技术的进步，而随着互联网的发展，后端框架的出现解决了后台代码庞大臃肿的问题。前端技术也从“网页三剑客”演变为新的“三剑客”，即 HTML、CSS 和 JavaScript，同时各种前端框架不断涌现，大大提高了开发效率和质量。
Vue响应式进阶常用API学习
weixin_44072254的博客
09-06 672
reactive()的浅层浅层响应式，和reactive()不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的属性是响应式的。readonly()的浅层作用形式,只有根级别是只读不可更改的，根级别以下的可更改，只是视图不会更新，但值改变了。shallowRef是浅层引用,只会跟踪原始对象的引用,不会跟踪原始对象的属性。创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。的副作用，这通常在对浅引用的内部值进行深度变更后使用。代理对象，并返回该代理对象对应的原始对象。
前端vue项目服务器部署(docker)
m0_46122129的博客
09-07 338
将你的nginx-alpine.tar包上传到服务器上。假设路径为 。 2、导入 Nginx Docker 镜像 使用以下命令将 文件加载为 Docker 镜像： 执行后会显示类似如下的输出，表示镜像已成功加载： 3、验证镜像是否加载 确认镜像已经导入成功： 应该可以看到 镜像在列表中。在你的服务器上确保 目录下包含以下内容：- ：Vue 项目构建后的静态文件。- ：自定义的 Nginx 配置文件。- 。确保 目录中有你的 Vue 项目的打包内容。在 下编写或确保已经有如下内容的 ： 3、编写ng
【nodejs】windows切換nodejs版本集成webstorm
突围
09-04 197
nodejs切换版本
【网络安全】如何预防xss
徐徐徐的博客
09-03 1257
责任：XSS防范需要前端后端共同参与；转义规则：需要根据业务场景选择；避免拼接HTML、避免使用内联事件。
react antd select下拉框选中一个值后变为输入框
03-30
默认情况下，mode属性的值为 "default"，表示下拉框只能选择预设的选项。如果将mode属性的值设置为 "tags"，则可以在下拉框中输入自定义的选项。 以下是一个示例代码： ``` import React, { useState } from ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值