【react+antd4.x】本地和环境上功能展示不一致

最新推荐文章于 2023-10-09 12:23:24 发布
最新推荐文章于 2023-10-09 12:23:24 发布
阅读量1.1k 收藏
点赞数
分类专栏： 使用antd的疑难杂症 antd 4.X升级变更 文章标签： 前端 antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/all_might1/article/details/123210345
版权

        最近在升级antd，整出来一些奇奇怪怪的问题。

        本地功能是完全正常的没有其他问题，上到测试环境就不可以了。这事儿搞了几天，心态爆炸属于是

        最后看了antd的更新日志，发现4.18.0改了Table的某些内容，感觉很有可能和这个有关。把antd版本降下来，发到环境上终于好了。

        如果本地功能都是正常的，发到环境上有问题，也许是antd版本的问题

        可以看一下日志，降版本，版本太高不稳定

Fliessenn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ant design pro生产和开发环境的坑
公众号【猴哥说前端】
12-17 3522
1、axios的get请求开发环境会自动带上cookie，但是生产环境则不会，需要手动设置以下代码： axios.defaults.withCredentials=true; 2、models全局和局部问题 局部model在生产环境中，在未渲染之前调用会报错，在开发环境中则不会，生产环境中需要使用其他的局部model，需将其提升为全局的model。...
react项目打包后部分样式失效的原因
weixin_44481459的博客
06-24 2902
今天测试提了几个样式的bug,我在本地怎么都重现不了，最后连接测试服务器进行调试，发现确实存在问题，但是就有点蒙蔽，把样式和本地的进行了比对，最后发现是两个组件最外层的className命名冲突了。。。 在本地开发时，不同的组件会调用自己import的样式，在项目打包后，所有的css文件进行了压缩，部署后，相同类名的样式会相互冲突，所以我们在开发的时候一定要注意，在每个组件的最外层包上一个专属的className,这样就不会出现这种问题了 ...
CSS - 解决 “本地测试” 和 “线上测试” 样式不一样问题
牧码的博客
10-15 3591
如题，基本上我也很少遇到这种情况，但实战中，还真遇到过……解决办法也很简单，只需要在本地样式CSS代码中，处理优先级即可，简单粗暴：“!important”。 ...
使用ant-design-vue中，开发环境与生产环境的样式不一样
py_boy的博客
12-04 2748
今天碰到个问题，本地使用ant-design-vue开发时，本地服务器上面的所有样式都没问题，界面功能十分完美，心里美滋滋的可以划水了，立刻上传到服务器。结果服务器上面的页面样式与本地的样式不一样，心里真的mmp了。通过修改本地代码，然后消除相关loading，上传到自己服务器上，开始了漫漫f12对比样式。最后是ant-design-vue里面的样式在本地可能不存在覆盖，服务器上面有相关覆盖，这个...
ant design pro v5安装与初始化（即达到和预览ant design pro 一样的界面风格与内容即所有pro资产均显示）
热水钟博客
01-22 2131
一、下载最新版本的node.js，例如node 15.6.0版本，这个很重要，否则低版本会造成umi不会出来能配置区块的那个图标，无法添加区块与模板功能。 二、在npm环境下安装与配置yarn和tyarn，后面基本采tyarn进行操作，即它是国内源，这个时候也要注意npm环境去安装yarn，否则有可能造成yarn无法安装包。 三、ant design pro V5脚手架安装： tyarn create umi 根据提示依次选择ant design pro,然后选择V5 四、缺省 不再...
react中引入图片路劲正确但是页面上不显示或者打包后不能正常显示的问题
qq_51398495的博客
01-07 3015
一、react中图片引入方式 　以前我们用img引入图片只需要如下即可，在react中这样写会报错： <img src="../assets/zzsc1.png" /> 下面我总结了两种方式： 1、用require方式引入路劲 错误用法： <img src={require("./zzsc1.png")} /> 上面这样写也是不会生效的，因为如果使用create-react-app和require导入图像，require返回一个ES模块而不是字符...
vue项目打包后出现页面布局异常、图片显示不出来等问题
weixin_46545863的博客
07-25 6000
vue项目打包后出现页面布局异常、图片显示不出来等问题
【JavaScript源代码】react+antd.3x实现ip输入框.docx
12-29
react+antd.3x实现ip输入框 　本文实例为大家分享了react+antd.3x实现ip输入框的具体代码，供大家参考，具体内容如下　表现形式如下：　js+html　　/**　* zks 2021 10 26　* ip输入框，作用于新建与修改虚拟子网 *...
react+antd搭建后台管理框架
05-20
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与...
react-antd-demo:学习react+react-router +antd 搭环境
04-30
git clone :modanzuo/react-antd-demo.git #框架用到的库 antd react react-app-rewired react-router react-router-dom fetch #运行 安装库 npm install #本地开发 yarn yarn run start npm npm run start ...
React+Antd+SpringBoot.zip
08-13
1.使用阿里云docker部署数据库，不需要本地重建数据库（网太卡，mysql没下载到本地） 有导出的sql指令，可以本地建库。 2.实现功能： 三表查询显示 三表删除（对有外键关系的进行判断） 更改数据（实现了用户...
React+antd后台管理系统模板
12-01
基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React，页面主要还是展示页面,比较简单不涉及后台交互的系统模板Demo
解决React 的＜img ＞src使用require的方式图片显示不出来或者音频显示不出来，展示的是[object Module]的问题
最新发布
m0_72958893的博客
10-09 1184
当我们用 单文件写组件时，在 script 标签内使用的是 ES6 的语法且使用 export default 进行默认导出。然而，require 是 CommonJS 的模块导入方式，不支持模块的默认导出，因此导入的结果其实是一个含 default 属性的对象，因此需要使用 .default 来获取实际的组件。相反，如果 文件中使用 CommonJS 或 AMD 模块化语法，使用 module.exports 对象进行导出，那么使用 require 导入时就不需要使用 .default 来获取。
【webpack】webpack打包后, 静态图片资源不显示的若干个问题
每天进步一点点, 靠近小目标一点点~
11-15 3486
最近在搭建公司的前端组件库, vue写的, webpack打包后, 在项目中引用组件库 其中有个组件引用了静态图片资源, 然而打包后在项目中引用该组件的图片就不显示了 遇到了以下若干问题, 小小记录一下~
关于react引入图片无法显示的问题（不报错）
cjcora的博客
06-09 5665
关于react引入图片无法显示的问题（不报错） 问题在UI组件里面使用添加图片，直接用src给出路径 在确定路径无错后，开始以为是antd design组件添加图片的问题。后面才发现react 两种解决方法： 第一种：用require（）方法（推荐） 第二种：将图片路径由import引入，再给src ...
4.react引入图片无法显示的问题（不报错）
qq_44438941的博客
03-13 249
图片无法显示
antd踩坑记录（持续更新）
m0_47170156的博客
11-29 473
antd踩坑记录placeholder不显示线上样式与本地样式不一致 placeholder不显示 绑定的变量初始值为空时需要定义为 null 或 undefined。 线上样式与本地样式不一致 打开 package.json 可以看到安装包上有 ^，这是说最低版本不能低于后面的数值，安装依赖时安装最新版本，这样会导致本地和线上的安装包版本不一致，可以将前面的 ^ 去掉， 锁定版本号。 ...
react项目require导入图片不显示，网页查找元素显示[object module]
weixin_45575273的博客
06-16 2726
解决方法：在你导入图片的后面加上.default
【CSS】关键字 -webkit-fill-available 详解
热门推荐
all_might1的博客
12-17 1万+
目录 一、问题描述 二、详细解释 三、解决方案 一、问题描述 在进行代码编写的时候发现给antd的inputNumber组件设置width时，不生效。尝试多次无果后，问了同事，同事掏出了一个关键字 -webkit-fill-available 后成功生效。 所以对其产生了兴趣，在网上检索下，用的必应竟然没找到相关信息。 （想起来了，不是必应检索不到，是因为过滤机制，在关键词前添加-起到过滤作用。） 觉得这个属性值是两个字...
react,js和antd4.x表单的t提交
05-30
在React.js和Ant Design 4.x中，表单的提交可以通过使用Form组件的onFinish属性来实现。当表单中的所有表单项都通过验证时，onFinish事件会被触发，并且会将表单的值作为参数传递给事件处理函数。下面是一个简单的例子，展示了如何在React.js和Ant Design 4.x中提交表单。 首先，在你的代码中导入所需的模块： ```js import React, { useState } from 'react'; import { Form, Input, Button } from 'antd'; ``` 接下来，创建一个表单组件： ```js const MyForm = () => { // 定义表单项的值 const [form] = Form.useForm(); // 表单提交事件 const handleSubmit = (values) => { console.log('Received values of form: ', values); // 在这里可以提交表单数据到服务器 }; return ( <Form form={form} onFinish={handleSubmit}> <Form.Item label="Username" name="username" rules={[{ required: true, message: 'Please input your username!' }]}> <Input /> </Form.Item> <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Please input your password!' }]}> <Input.Password /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; ``` 在这个例子中，我们使用了Ant Design的Form、Input和Button组件来创建表单。在表单中，我们定义了一个onFinish事件处理函数handleSubmit，当表单中的所有表单项都通过验证时，该事件会被触发。在事件处理函数中，我们可以获取到表单的值，并将其提交到服务器。 最后，我们将表单组件渲染到页面中： ```js ReactDOM.render(<MyForm />, document.getElementById('root')); ``` 这是一个简单的例子，你可以根据自己的需求来添加更多的表单项和验证规则。希望对你有帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值