前端（三）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才会显示数量选择器，除非你显式指定，但是问题是有必要组件自己做这种判断吗，看的人一头雾水

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.kjpai.cn/news/2024-04-08/155673.html，文章来源：网络cs，作者：淼淼，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！