logo杰霸霸博客
编程语言教程
Java教程
JVM笔记NIO笔记JUC笔记设计模式笔记SpringBoot笔记Spring笔记SpringSecurity笔记SpringCloud笔记常用工具库笔记MyBatis笔记Java基础笔记Dubbo笔记Netty笔记
Scala教程
Scala基础笔记
Python教程
Python基础笔记
算法教程
算法笔记
前端教程
Html笔记Vue笔记React笔记
DevOps
Linux教程Docker教程Git教程Nginx教程Jenkins教程K8s教程Harbor教程
数据库教程
Redis教程MySQL教程PostGreSQL教程分布式事务教程数据库SQL调优Doris笔记Canal笔记Maxwell笔记
大数据
Hadoop笔记CDH笔记Spark笔记Kafka笔记数据仓库笔记Sqoop笔记ZooKeeper笔记Hive笔记Kylin笔记Flink笔记Superset笔记DolphinScheduler笔记HBase笔记Kettle笔记Atlas笔记数据湖Iceberg笔记数据湖Paimon笔记Kerberos笔记
项目笔记
电商数仓2.0Spark实时项目Flink实时数仓4.0设计方案
AI笔记
Agent使用笔记LMStudio笔记LMStudio笔记
React教程
  • React简介
  • 快速搭建React
  • 使用React开发者工具
  • JSX入门
  • JSX的CSS样式
  • React组件介绍
  • 事件处理
  • 条件和列表渲染
  • 组件通信
  • 组件的状态
  • 组件状态的操作
  • 受控与非受控组件
  • Hooks介绍
  • useRef函数
  • useImperativeHandle函数
  • useEffect函数
  • useLayoutEffect函数
  • useInsertionEffect函数
  • useReducer函数
  • useContext函数
  • memo和useMemo
  • useCallback函数
  • 使用并发模式
  • useId函数
  • AntdUI组件库
  • Antd全局配置
  • 手写antd按钮组件
  • 手写antd评分组件
  • 手写antd提示组件
  • 自定义hook
  • ahooks介绍
  • useRequest函数
  • ahooks处理业务场景
  • ahooks处理状态
  • ahooks处理effect
  • ahooks处理dom
  • flushSync函数
  • 使用errorboundary
  • createPortal函数
  • Profile性能测试
  • CSS-in-JS
  • 使用TailwindCSS
  • react-spring动画库
  • antd charts图表库

useId函数

useld是一个React Hook,可以生成传递给无障碍属性的唯一ID

1. 使用useID

jsx
import { useId} from 'react'

function MyInput() {
  const passwordId = useId()
  return (
    <>
      <label>密码:
        <input type="password" aria-describedby={passwordId} />
      </label>
      <p id={passwordId}>密码不少于8位</p>
    </>
  )
}

function App() {
  return (
    <div>
      hello App
      <br />
      <MyInput />
    </div>
  )
}
export default App

Alt text

最后更新于: 2024-12-30 15:15
上一篇使用并发模式下一篇AntdUI组件库

评论

登录后即可评论
蜀ICP备2024053324号|公安备案川网安备51018202000226号
版权所有 © 2015-2026 杰霸霸 · GitHub