react: typescript system params optimize
1、system-params-service
import paramCache from "../common/param-cache"
import RequestPromise from "./axios-service/RequestPromise"; export const fetchSystemParams = () => {
return RequestPromise({url: '/api/system-parameters'})
}
const parameters = paramCache.getItem("system-params") export const getParam = async (type: string) => {
if (parameters) {
return parameters[type]
} else {
return fetchSystemParams().then(({data}) => {
paramCache.setItem("system-params", data)
return data[type]
})
}
} export const getParamKeys = async (type: string) => {
if (parameters) {
return setParamKeys(parameters)
} else {
return fetchSystemParams().then(({data}) => {
paramCache.setItem("system-params", data)
return setParamKeys(data[type])
})
}
} const setParamKeys = (params: any) => {
const paramKeys: string[] = [];
for (const key in params) {
if (params.hasOwnProperty(key)) {
paramKeys.push(key)
}
}
return paramKeys
}
2、param-type (filter)
import {useState, useEffect} from "react";
import {getParam} from "../../service/system-params-service";
const useParamType = (type: string) => {
const [paramType, setParamType] = useState<any>(null)
useEffect(() => {
getParam(type).then(data => {
setParamType(data);
})
}, [type])
return paramType;
}
export default useParamType;
3、param-select component
import * as React from "react";
import useParamType from "./param-type";
import { useState, useEffect } from "react";
import {Select} from "antd";
import { getParamKeys } from "../../service/system-params-service"; interface ISelectProps {
paramType: string;
selectValue: string;
placeholder?: string;
selectChange: (type: string) => void;
}
const {Option} = Select;
const ParamSelect = (props: ISelectProps) => {
const paramTypeFilter = useParamType(props.paramType)
const [paramKeys, setParamKeys] = useState<string[]>([]) useEffect(() => {
getParamKeys(props.paramType).then(data => {
setParamKeys(data)
})
}, []) return (
<Select
style={{width: 180}}
allowClear={true}
value={props.selectValue}
onChange={props.selectChange}
>
{paramKeys && paramKeys.map((option, index) => {
return <Option value={option}>{paramTypeFilter[option]}</Option>
})}
</Select>
)
}
react: typescript system params optimize的更多相关文章
- react: typescript system params method optimize
import * as _ from "lodash"; import paramCache from "../common/param-cache" impo ...
- react + typescript 学习
react,前端三大框架之一,也是非常受开发者追捧的一门技术.而 typescript 是 javascript 的超集,主要特点是对 类型 的检查.二者的结合必然是趋势,不,已经是趋势了.react ...
- react typescript jest config (一)
1. initialize project create a folder project Now we'll turn this folder into an npm package. npm in ...
- React + Typescript领域初学者的常见问题和技巧
React + Typescript领域初学者的常见问题和技巧 创建一个联合类型的常量 Key const NAME = { HOGE: "hoge", FUGA: "f ...
- 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目
一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...
- React + TypeScript + Taro前端开发小结
前言 项目到一段落,先来记录一下,本文以前端新手的角度记录React.TypeScript.Taro相关技术的开发体验以及遇到的问题和解决方法. 之前总说要学React(这篇博客:代码使我头疼之Rea ...
- 前端自动化测试 —— TDD环境配置(React+TypeScript)
欢迎讨论与指导:) 前言 TDD -- Test-Drive Development是测试驱动开发的意思,是敏捷开发中的一项核心实践和技术,也是一种测试方法论.TDD的原理是在开发功能代码之前,先编写 ...
- React + TypeScript:元素引用的传递
React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现.前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作. ...
- react+typescript报错集锦<持续更新>
typescript报错集锦 错误:Import sources within a group must be alphabetized.tslint(ordered-imports) 原因:impo ...
随机推荐
- 使用条件随机场模型解决文本分类问题(附Python代码)
对深度学习感兴趣,热爱Tensorflow的小伙伴,欢迎关注我们的网站!http://www.tensorflownews.com.我们的公众号:磐创AI. 一. 介绍 世界上每天都在生成数量惊人的文 ...
- CSS3过渡结束监听事件,清除/修改表单元素的一些默认样式
document.querySelector('div').addEventListener('transitionEnd',function(){ console.log('过度结束') }) 如果 ...
- SpringCloud-Nacos/OpenFien/Gateway的基本介绍及快速上手
一.Spring-Cloud-Alibaba-Nacos 注册中心 1.下载.安装 Nacos 下载地址:https://github.com/alibaba/nacos/releases 下载后解压 ...
- Error while processing transaction.java.lang.IllegalStateException: begin() called when transaction is OPEN!
Spark Streaming从flume 中使用Poll拉取数据时,报如下错误: Error while processing transaction. java.lang.IllegalState ...
- c期末笔记(3)
参数于模运算 1.实参与形参易错点 实参与形参之间是值传递. 实参&形参 实参可以是:常量,表达式或者变量 形参只能是变量 指针和指针变量 1.指针的定义 指针的定义形式:int*p = &a ...
- 【STM32项目笔记】STM32CubeMX+Keil+Proteus联合实现LED闪烁
摘要 利用STM32CubeMx配置STM32芯片的功能,然后将配置后的内容生成代码,并导出成可以使用Keil打开编辑的文件,在Keil中添加控制代码后,下载到Proteus仿真中,使用仿真观察代码执 ...
- ASP.NET Core中的Controller
ASP.NET CORE出现之前我们实现的Controller,MVC都继承自Controller基类,WebApi的话继承自ApiController.现在ASP.NET CORE把MVC跟WebA ...
- flask-redirect
flask-redirect from flask import Flask, url_for, request, redirect app = Flask(__name__) @app.route( ...
- 数据结构和算法(Golang实现)(30)查找算法-2-3-4树和普通红黑树
文章首发于 阅读更友好的GitBook. 2-3-4树和普通红黑树 某些教程不区分普通红黑树和左倾红黑树的区别,直接将左倾红黑树拿来教学,并且称其为红黑树,因为左倾红黑树与普通的红黑树相比,实现起来较 ...
- python 面向对象反射以及内置方法
一.反射 什么是反射:可以用字符串的方式去访问对象的属性,调用对象的方法(但是不能去访问方法),python中一切皆对象,都可以使用放射. 反射的四种方法: hasattr:hasattr(objec ...