React
roseLin...
这个作者很懒,什么都没留下…
展开
-
material-ui-table 的 lookup属性(键值对)
lookup属性:用于查找渲染数据的键值对; const columns = [ { title: '单据类型', field: 'documentType', lookup: { travel_train: '差旅/培训费报销单', labour: '劳务费报销单', dailyExpenses: '日常支出报销单', meeting: '会议费报销单', maintenance原创 2022-04-15 10:23:48 · 576 阅读 · 0 评论 -
material-ui 的媒体查询(手机端和PC端)
useMediaQuery是 React 的 CSS 媒体查询 (Media queries)hook它监听与 CSS 媒体查询的匹配的内容。它允许根据查询的结果是否匹配来渲染组件官网介绍:https://mui.com/zh/components/use-media-query/#main-content简单的媒体查询应该将媒体查询提供给 hook 作为第一个参数。 媒体查询的字符串可以是任何有效的 CSS 媒体查询:import * as React from 'react';im.原创 2022-04-15 10:20:02 · 1227 阅读 · 0 评论 -
async-await 的接口返回 promise类型的取值处理
如果在使用 async-await 处理接口取返回值,若没有对返回值进行 Promise 封装处理,那么最终等到的返回值就是一个 Promise对象。所以需要在将接口获取到值往外层函数传的时候,对其进行 Promise 封装处理,然后再得到一个 Promise 封装处理后的对象 之后用 Promise.allSettled() 取对象里的值,在用 filter() 函数 和 map() 函数 对其值进行过滤筛选,最终获取到的才是我们要的值。 const fetchCheck = async () =&原创 2022-04-15 10:18:34 · 5640 阅读 · 0 评论 -
material-ui Autocomplete 中的过滤选项方法
Autocomplete 有一个 filterOptions方法:可以自由决定哪些选项可用,哪些将隐藏。如果只想显示所有选项,只需实现filterOptions返回所有值:filterOptions={(options, state) => options}实现 不区分大小写模糊查询 项目名或编码:<Autocomplete value={values.fundSource} inputValue={fundSourceInput} options={fundS原创 2022-04-15 10:15:27 · 748 阅读 · 1 评论 -
material-ui-table 数据类型-货币 设置
Intl.NumberFormat:输入一串数字,然后对其进行金额格式化:用 逗号 分隔(三位一逗号)保留 2 位小数点 ,数不足补 0四舍五入要加金额符号 $var number = 123456.789;var result = new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'USD' }).format(number);console.log(result); // $123,456.7.原创 2022-04-15 10:11:29 · 257 阅读 · 0 评论 -
滚动组件 react-perfect-scrollbar 和冻结行、列
https://www.npmjs.com/package/react-perfect-scrollbar :用到滚动组件去作友好的滚动处理(没发觉有什么具体效果感觉)https://v4.mui.com/zh/components/tables/:用material-UI 的table组件 + 自定义CSS 实现冻结效果;import React, { useEffect, useState } from 'react';import { Link as RouterLink } from 'rea原创 2022-04-15 10:06:41 · 1658 阅读 · 0 评论 -
React获取router路由路径里的相关信息
路由:'financial-budget/:id/edit'路径:http://localhost:3000/financial-budget/4028963b7ce8b541017ce90bed9400ca/edit(1)用 useParams() 获取参数:import { useParams } from 'react-router-dom';const { id } = useParams();console.log(useParams()); ======> usePar原创 2022-04-15 10:00:49 · 12343 阅读 · 0 评论 -
在 React组件里加 if...else 判断
在React中,一个组件的HTML标签与生成这些标签的代码内在地紧密联系在一起。这意味着你可以轻松的利用javascript强大的魔力,比如循环和条件判断等。想要在组件中添加条件判断,似乎是件比较困难的事情,因为if/else逻辑很难用HTML标签来表达。直接在JSX中加入if语句会渲染出无效的JavaScript:var IvanIf = React.createClass({ render: function () { return( <!--会渲染出无转载 2021-04-09 21:30:26 · 5767 阅读 · 0 评论