前端(三)React踩坑记录

这篇具有很好参考价值的文章主要介绍了前端(三)React踩坑记录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、引言

        作者最近新的平台项目是需要用react的,和vue区别还是比较大的,这里记录下踩坑和使用经验。

二、环境

        框架:antd

        依赖:

"dependencies": {
        "@ant-design/icons": "^4.7.0",
        "@ant-design/plots": "^1.0.9",
        "@aws-sdk/token-providers": "3.501.0",
        "@babel/helper-string-parser": "^7.22.5",
        "@loadable/component": "5.15.3",
        "@rjsf/antd": "^5.13.0",
        "@rjsf/core": "^5.13.0",
        "@rjsf/utils": "^5.13.0",
        "@rjsf/validator-ajv8": "^5.13.0",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.3.2",
        "@testing-library/user-event": "^7.1.2",
        "ajv": "^8.12.0",
        "antd": "^4.20.0",
        "axios": "^0.21.1",
        "babel-eslint": "^10.1.0",
        "bignumber.js": "^9.1.2",
        "core-js": "^3.20.3",
        "cross-env": "^7.0.2",
        "customize-cra": "^1.0.0",
        "diff_match_patch": "^0.1.1",
        "ejs": "^3.1.3",
        "enzyme": "^3.11.0",
        "express": "^4.17.1",
        "json-bigint": "^1.0.0",
        "lodash": "^4.17.21",
        "mockjs": "^1.1.0",
        "moment": "^2.29.4",
        "nodemon": "^2.0.4",
        "qrcode": "^1.5.1",
        "qrcode.react": "^3.1.0",
        "rc-queue-anim": "^2.0.0",
        "rc-texty": "^0.2.0",
        "rc-tween-one": "^3.0.6",
        "react": "^17.0.2",
        "react-app-rewired": "^2.1.8",
        "react-dom": "^17.0.2",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.2",
        "react-transition-group": "^4.4.2",
        "styled-components": "^6.1.8",
        "tslib": "^2.4.0",
        "typescript": "~3.7.2",
        "xlsx": "^0.18.5",
        "yarm": "^0.4.0",
        "yarn": "^1.22.19"
    },

三、React踩坑

1、编译

        不知道是react本身编译规则严苛,还是公司的pipline设定,代码里面编译的时候不允许有未使用的变量,不允许使用未导入的组件

        举个例子,如果使用了分页,但是没有导入Pagination,编译报错

import {Button, Modal, Layout, messag, Space, Table, Cascader, Input} from 'antd';


<Pagination onChange={this.onPageChange} total={this.state.totalSize}/>

        如果标识了参数但是没有用,编译报错

onPageChange = (page, size) => {
        this.setState({page: page});
        this.loadList();
    };

2、变量延迟

        这是很坑的,设置变量值之后居然没有变,是有延迟的,所以当设置完之后需要间隔一下再去使用,作者就出现了点击第二页显示第一页

onPageChange = (page, size) => {
        this.setState({size: size});
        this.setState({page: page});
        setTimeout(() => {
            this.loadList();
        }, 5);
    };

3、分页

        根据官网显示,列表数量超过50才会显示数量选择器,除非你显式指定,但是问题是有必要组件自己做这种判断吗,看的人一头雾水

前端(三)React踩坑记录,前端,前端,react.js,javascript

前端(三)React踩坑记录,前端,前端,react.js,javascript

4、上传文件多次触发

        这里就是上传组件里面嵌套了一个按钮,不知道为什么选中文件之后会多次触发fileChange

,fileChange调用upload然后后面两次的文件还是空的,然后就告警两次

<Upload
                                        loading={this.state.uploadLoading}
                                        id='modify-excel-input'
                                        className='modify-excel-input'
                                        accept='.xls,.xlsx'
                                        action={getUploadFileUrl()}
                                        beforeUpload={this.checkFile}
                                        onRemove={this.deleteFile}
                                        onChange={this.fileChange}
                                        maxCount={1}
                                    >
                                        <Button
                                            loading={this.state.uploadLoading}
                                            icon={<UploadOutlined/>}>上传</Button>
                                    </Upload>


upload = () => {
        console.log('RetrySelect upload');
        if (this.state.fileList == null || this.state.fileList.length <= 0
            || this.state.fileList[0].response == null || this.state.fileList[0].response.length <= 0) {
            message.error("请上传文件");
            return;
        }
 }

        所以作者就在fileChange里面加了判断看文件是否为空

fileChange = ({fileList: newFileList}) => {
        if (newFileList == null || newFileList.length <= 0
            || newFileList[0].response == null || newFileList[0].response.length <= 0) {
            return;
        }
        console.log("文件列表: ", newFileList);
        this.state.fileList = newFileList;
        this.upload();
    }

 5、绑定本地变量

        输入框、选择框之类的组件需要和本地变量进行绑定,但是他就不像vue简单的设置v-model就可以,他需要识别变更方法

        还必须bind(this),不然绑定本地变量的话根本没法写进输入框,官网也没什么说法,chatGpt也不知道,让人一头雾水

<Input 
                                       maxLength={100}
                                       value={this.state.subject}
                                       style={{width: '350px'}}
                                       onChange={this.changeSubject.bind(this)}
                                       placeholder="请输入"/>

changeSubject = (event) => {
        this.setState({subject: event.target.value});
    };

四、使用

        这里再介绍一些基础使用

1、动态列

        如果表格数据不固定,就可以后端返回列名

const processedColumns = resData.columns.map(column => {
                return {
                    ...column,
                    dataIndex: column.dataIndex,
                    title: column.title,
                    width: '200px',
                };
            });


            this.setState({columns: processedColumns})


<Table
                                columns={this.state.columns}
                                dataSource={this.state.list}
                                bordered
                                scroll={{x: 1500, y: 'calc(100vh - 350px)'}}
                                pagination={false}
                            />

2、超长展示

        超过一定长度展示省略号,悬浮展示所有

{
                title: 'response',
                dataIndex: 'response',
                width: '180px',
                render: (text) => {
                    return <Tooltip placement="top" title={text}>
                        <div style={{
                            width: 150,
                            overflow: "hidden",
                            textOverflow: "ellipsis",
                            whiteSpace: "nowrap"
                        }}>{text}</div>
                    </Tooltip>

                }
            },

3、跳转携带参数

        原始页面把参数直接缀在路径后面就可以,如果是很多参数可以用json转字符串,到目标页面进行解析

const w = window.open('about:blank');
        w.location.href = '#/detail/' + record.id;

        目标页面通过匹配参数拿到

constructor(props) {
        super(props);
        this.state = {
            loadingExecute: false,
            id: props.match.params.id,

        参数的名字是由配置url页面决定的

{
        path: '/detail/:id?',
        name: 'detail',
        pageId: '1010',
        authPass: true,
    },

4、弹窗

        他的弹窗使用visible属性判断是否展示的,在render里面定义号,然后通过更新本地变量进行展示隐藏

<Modal visible={this.state.executeVisible} onOk={this.goExecute.bind(this)}
                               onCancel={this.handleCancel.bind(this)}
                               footer={[
                                   <Button key="submit" type="primary" onClick={this.goExecute.bind(this)}>
                                       确认
                                   </Button>,
                                   <Button key="back" onClick={this.handleCancel.bind(this)}>
                                       取消
                                   </Button>
                               ]}>
                            <div style={{marginTop: '20px'}}>
                                <span style={{width: '80px', marginRight: '10px'}}>工单</span>
                                <Input 
                                       maxLength={100}
                                       value={this.state.woCode}
                                       style={{width: '350px', marginRight: '20px'}}
                                       onChange={this.changeWoCode.bind(this)}
                                       placeholder="请输入"/>
                            </div>
                            <div style={{marginTop: '20px'}}>
                                <span style={{width: '80px', marginRight: '10px'}}>主题</span>
                                <Input 
                                       maxLength={100}
                                       value={this.state.subject}
                                       style={{width: '350px'}}
                                       onChange={this.changeSubject.bind(this)}
                                       placeholder="请输入"/>
                            </div>
                        </Modal>

5、获取浏览器信息

        主要是获取域名和cokkie

const cookie = document.cookie.split(';')

const host = document.domain.toLowerCase()

五、总结

        不同的前端使用起来区别挺大的,作者感觉还是vue好用一些,不过react好像更加国际化一些,公司整体还是偏向用react。文章来源地址https://www.toymoban.com/news/detail-856667.html

到了这里,关于前端(三)React踩坑记录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript框架 Angular、React、Vue.js 的全栈解决方案比较

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。前端框架(React、Angular 和 Vue)进行简化比较。 MERN 技术栈包含四大具体组件: MongoDB:一款强大的 NoSQL 数据库,以灵活的 JSON 格式存储数据。 Express.js:一套极简但强大的

    2024年02月03日
    浏览(58)
  • 2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较

    🎉欢迎来到Java学习路线专栏~探索2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较 ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:Java学习路线 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 🍹文章作者技术和水

    2024年02月11日
    浏览(49)
  • React.js前端 + Spring Boot后端员工管理

    该项目是一个员工管理系统,前端使用 React.js 构建,后端使用 Spring Boot 和 Data JPA 和 Lombok 构建。它提供了有效管理员工信息的全面解决方案。 特征 响应式设计:响应式 UI 设计,确保跨各种设备的可用性。 数据验证:验证用户输入以确保数据完整性。 使用的技术 前端:R

    2024年04月28日
    浏览(50)
  • 前端js react vue怎么实现在线预览doc文档

    先说结论: 目前在纯前端层面没有很好的方案,基本都需要服务端的介入。 优点 :简单易用,无需配置 缺点 :文档需要支持外网访问,且文档会是公开可见的,所以对于一些内部敏感的文档来说,这个显然是不可行的。 需要后端介入配合 onlyoffice地址 这个也要先在服务器

    2024年02月15日
    浏览(85)
  • 前端框架之争:Vue.js vs. React.js vs. Angular

    🎉欢迎来到Web前端专栏~前端框架之争:Vue.js vs. React.js vs. Angular ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:架构设计 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习 🍹文章作者技术和水平有限,如果

    2024年02月07日
    浏览(93)
  • Node.js npm V8 React Express的运行配合关系:构建JavaScript应用的基石

    目录 Node.js 和 V8 引擎 Node.js 和 npm LTS(Long Term Support) React Node.js的作用 Express Node.js 和 V8 引擎 Node.js 使用 Google 的 V8 JavaScript 引擎 来执行 JavaScript 代码。V8 是一个高性能的 JavaScript 和 WebAssembly 引擎,用于在 Google Chrome 浏览器和 Node.js 中运行 JavaScript。 V8 引擎的更新 通常包括

    2024年03月12日
    浏览(64)
  • 如何使用前端框架(React、Angular、Vue.js等)?该如何选择?

    聚沙成塔·每天进步一点点 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而

    2024年02月07日
    浏览(60)
  • 前端刷新页面的五种方法(含原生js、vue和react)

    1、window.history.go(0)方法 2、location.reload()方法 3、location.href=location.href方法 4、vue-router方法 5、react-router方法

    2024年02月16日
    浏览(51)
  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(65)
  • 【前端】html2canvas生成图片空白排查data:;(js vue react uniapp)

    因为要做一个分享图,就用到了html2canvas,一开始是好好的,今天随便测了下,发现图片显示不出来了。打印了下,生成的图片链接变成了 data:; 。后面一步一步地排查,发现是页面内容太多了,删减一点内容就能显示出来。然后我又去认真看了下html2canvas的各个参数,发现可

    2024年02月03日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包