React

Form

一些技巧

获取 formdata

参考： so

class NameForm extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault() # 取消form的默认行为（例如：自动刷新)
    console.log(event.target[0].value)
    console.log(event.target.elements.username.value)
    console.log(event.target.username.value) # 用的最多
    console.log(this.inputNode.value)
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            name="username"
            ref={node => (this.inputNode = node)}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    )
  }
}

技巧

同时使用 tailwind 类和自定义类

className={`` m-y-4}

NextJs

开始

创建一个新项目

pnpx create-next-app@latest

环境变量

注意：浏览器环境必须加 NEXT_PUBLIC_ 前缀,否则无法读取,且 build 后会硬编码到代码中

process.env.<ENV>

路由

发送和接受参数

发送端

<Link href="/test?a=a">test </Link>

接收端

    const searchParams = useSearchParams();

    const param1 = searchParams.get('a');
    console.debug("参数",param1)

FAQ

环境变量没有变

不明白为什么机器的环境变量里面有

UI

• MUI
• tremor-raw
• dotui

MUI

缺点

• 默认的很多界面在黑色下显示有问题

资源

UI

1. css loading
2. tailwinds elements
3. nextjs shadcn dashboard

动画

• animejs
• A React renderer for Three.js
• popmotion 简单的动画库，打造令人愉悦的用户界面
• JavaScript 样式指南
• mo·js是一个 javascript 运动图形库
• 使用 Canvas API 创建动画视频的 TypeScript 库。
• 浏览器中的高性能五彩纸屑动画

https://github.com/airbnb/lottie-web

Astro

安装