FE-阿阳的博客

'View' cannot be used as a JSX component。

问题描述项目中需要限制 input 只能输入数字和小数点，并且限制到小数点后2位问题结果使用 Form.Item 中的 getValueFromEvent 属性，代码如下：<Form.Item getValueFromEvent={(e: any) => { const { value } = e.target; const tempArr = value.split('.'); if (tempArr[1]?.length) { retu

问题描述antd Form 中 Form.Item 有时会使用自己封装的组件，然后发现 Form 的 initialValues 不起作用，以及 onValuesChange 不会触发，获取不到值；解决方案封装的子组件中需要手动设置赋值和调用传值，代码如下：import { memo } from 'react';import { Select } from '@homed/mortise-ui';import { SquareMini16pt } from '@homed/mortise-i

ref 和 forwardRef问题描述在开发react组件时，遇到以下报错：解决方案用 forwardRef 包装一层，如下：const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className="FancyButton"> {props.children} </button>));// 你可以直接获取 DOM button 的 ref：const

本地调试 npm 包方案自营后台进入开发之后，需要抽离组件和物料到 mortise-UI 和 物料库，本着‘工欲善其事必先利其器’的工作方式，先解决下本地调试 npm 包的方案。以下是几种方案：方案一：在 mortise-ui 项目中修改，在文档中查看修改效果，调试完成之后，再引入项目中调试；进入到 mortise-ui 目录下；执行 npm run start（dumi 的开发模式 dumi dev），注意： node 版本不高于14，一般12或者14都可以，亲测 16报错。第一次启动需要在根

umi 中 引入 npm 包 less 变量问题描述最近开发组件库，组件库中有色彩系统，需要在项目中引用，此处记录解决方案解决方案方案一： 在 less 中引入，如下：需要每个 less 文件中引用，所以舍弃@import "~@homed/mortise-ui/es/components/style/themes-override/color.less"; // 引入 mortise 色彩体系方式二： 将 less 转换为 js 文件，通过修改 umi 的配置 theme 字段实现，

antd 中 Table 使用问题总结问题描述最近经常遇到 table 的宽度问题，UI 有各种列宽度的需求，这里记录总结下问题结果如果只给某些列设置 width 值，则设置 width 值的列表会有固定宽度，其他列根据内容自适应分配剩余宽度如果给所有列设置 width 值，则所有列根据 width 的比列分配总体宽度如果想达到一列宽度固定，其他列平分布局，可以巧用 fixed 属性，比如最后一列设置 fixed: ‘right’ 属性，给 Table 设置 scroll={{ x: 1200

antd 中 Tooltip 组件设置偏移量问题描述后台的平台用到 antd 的比较多，Tooltip 也是比较常用的组件之一，Tooltip 的 placement 属性支持设置提示的位置，但是有时候 UI 那关还是过不去，想要增加一点偏移量，就需要折腾一番。解决方案由于 Tootip 是动态设置的位置，所以设置的 ‘transform: translate’ 偏移量不起作用，这时候需要用到 align 属性，align 属性官网没做详细链接，只是提示参考 https://github.com/r