react hook 和 typescript 实现一个计算器

效果图

缺点

js自带的eval 可实现字符串表达式计算,但搜了很多资料,都不推荐使用它,原因是会带来严重的安全问题,于是代码使用 Function 来替代 eval计算字符串表达式的结果的,但eslint 仍会提示这种写法不太好,需要在上面加一行注释绕过 eslint 检查.后续有空再用栈去实现一变四则运算.
精度问题,在小数运算的时候会出现错误如1.2*3=3.5999999999999996,这是 js 自带的问题,先查会资料,到时再写一个博客探讨小解决方案.

代码

可能代码能写的更简单,但因为是第一次用 react 结合typescript 去写，然后为了可以去练习某种写法比如<string|null>等,然后就显得有些繁琐.
将代码复制到文件后挂载到 App.tsx 即可,需要注意import路径

calculate.tsx

import * as React from "react";
import "./calculate.css";
export interface ICalculateProps {}export default function Calculate(props: ICalculateProps): JSX.Element {const [calculateStr, setCalculateStr] = React.useState<string | null>(null);const numbers: string[] = ["1","2","3","4","5","6","7","8","9","0","+","-","*","/","(",")",".","清除","计算",];function increaseStr(clickStr: string): void {setCalculateStr((calculateStr) => {if (calculateStr === null) return clickStr;else return calculateStr + clickStr;});}function calculate(): void {setCalculateStr((calculateStr) => {// eslint-disable-next-line no-new-funclet func: Function = new Function('"use strict";return ' + calculateStr);return func();});}function clear(): void {setCalculateStr("");}return (<div className="calculate-container">{calculateStr === null ? (<div className="calculate-show">{""}</div>) : (<div className="calculate-show">{calculateStr}</div>)}{numbers.map((item, index) => {if (item === "计算") {return (<buttonclassName="calculate-number calculate"key={index}onClick={calculate}>{item}</button>);} else if (item === "清除") {return (<buttonclassName="calculate-number"key={index}onClick={clear}>{item}</button>);} elsereturn (<buttonclassName="calculate-number"key={index}onClick={() => increaseStr(item)}>{item}</button>);})}</div>);
}

calculate.css

.calculate-container {display: flex;flex-direction: row;flex-wrap: wrap;width: 300px;height: 200px;background-color: rgb(40, 211, 74);
}.calculate-show {overflow: auto;width: 300px;height: 35px;
}
.calculate-number.calculate {width: 300px;
}
.calculate-number {background-color: rgb(116, 223, 29);width: 100px;
}

react hook 和 typescript 实现一个计算器相关推荐

React Hook + Typescript，实现高颜值在线记账本
React 已经是 JavaScript 生态系统中最受欢迎的前端框架之一.尽管人们已经对它赞不绝口,但 React 团队仍然在努力让它变得更好. 在 2018 ReactConf 大会上,React ...
React+Typescript实现一个甘特图表格
React+Typescript实现一个甘特图表格好久没更新博客了,最近工作写了一个有趣的东西,想和大家分享一下照例先放效果图准备项目,直接放出依赖项目 {"name": & ...
slqite3库查询数据处理方式_绝活！十一个优质React Hook库, 收藏备用
本文字数:6539字预计阅读时间:18分钟建议阅读方式:收藏备用温馨提示:最近全国大幅降温,注意防寒保暖,开心跨年长按识别,后台回复 "电子书" 即可领取<JavaS ...
源码解析 React Hook 构建过程
2018 年的 React Conf 上 Dan Abramov 正式对外介绍了React Hook,这是一种让函数组件支持状态和其他 React 特性的全新方式,并被官方解读为这是下一个 5 年 R ...
React Hook基本使用踩坑指南
React因为提倡函数式编程,所以提出了Hook思想来增强函数组件的功能,以此来替代基于Class的组件.但是我们有可能从基于Class这样的实例化组件转向函数组件时思想还没有完全转过来,还是用基于实 ...
react hook问题讲解
React Hook 官网地址:https://react.docschina.org/docs/hooks-faq.html (1)问题分析? Hook 是什么? Hook 是一个特殊的函数,它可以 ...
react --- Hook的使用
Hook 是React16.8一个新增项,它可以让你在不编写class的情况下使用state以及其他的React特性特点: 无需修改组件结构的情况下复用状态逻辑将组件相互关联的部分拆分成更小的函数 ...
hook xposed 自定义类_【开始学习React Hook(1)】Hook之useState
react hook是react推出的一种特殊函数.这些函数可以让你在不创建react class的情况下依然可以使用react的一些特性(诸如目前react的钩子函数拥有的所有特性). 最常用的ho ...
React hook 中的数据获取
相关说明: 对于hook相关词不翻译,感觉翻译后怪怪的. effect hook 效果钩子,用于执行一些副作用例如获取数据 . state hook 状态钩子. 使用----------- 和 --- ...

react hook 和 typescript 实现一个计算器

效果图

缺点

代码

react hook 和 typescript 实现一个计算器相关推荐

最新文章

热门文章