使用React.ts创建一个密码生成器的简单示例

目录

• 密码生成器Demo
• • Feature
  • 知识点
  • • React TypeScript —— Function Components
    • 为元素(::before/::after)绑定点击事件
    • React如何正确定义对象数组
    • 在React中设置复选框`check`属性
    • 三目运算符实现React动态绑定class和style
  • 参考资料

密码生成器Demo

使用密码生成器工具创建随机密码。PC 浏览器体验

该Demo旨在于练习React.ts函数组件写法。Github项目地址

Feature

• 随机生成密码
• 显示密码强度
• 可选密码选项(长度、大写/小写字母、数字、符号)
• 单击密码区域将密码复制到剪切板上

知识点

React TypeScript —— Function Components

这些可以写成接受props参数并返回一个JSX元素的普通函数。

// 声明属性的类型
type AppProps = {
   
  message: string;
}; /* 如果导出，请使用`interface`，以便消费者可以扩展 */

// 声明函数组件的最简单方法;返回类型是推断出来的。
const App = ({
    message }: AppProps) => <div>{
   message}</div>;

// 你可以选择声明返回类型，这样当你不小心返回其他类型时就会抛出错误
const App = ({
    message }: AppProps): JSX.Element => <div