javascript - 如何在反应中创建一个元素并将 aria-live 用作其上的自定义挂钩

Question

有没有办法创建一个自定义钩子，该钩子能够创建一个组件，该组件将充当 aria-live 的播音员来宣布应用程序中的动态变化？

目前我正在使用这样的东西：

export const useAnnouncer = () => {
  const [message, setMessage] = useState<string | null>(null)

  const setAnnouncer = (m: string) => setMessage(m)

  const announcer = (
    <div className="sr-only" aria-live="polite" aria-atomic="true" >
      {message}
    </div>
  )
  
  return [announcer, setAnnouncer] as const

实际上，它的作品。但这不是我的问题。因为现在 aria-live 元素的包装器正在调用 hook 的组件中创建。

例如：

const Controls = () => {
  const [announcer, setAnnouncer] = useAnnouncer()

const handleClick = () => {
   setAnnouncer('test')
}

return (
  <div>
     {announcer}
     <nav><button onClick={(e: ButtonEvent) => handleClick(e, firstPage)}>test</button></nav>
   </div>
  )
}

我想避免{announcer}在我的 jsx 中。是否可以为 aria-live 创建一个包装器，useAnnouncer并且只在组件中设置 setAnnouncer 来处理语音通知？

标签： javascriptreactjsreact-hooksaccessibilitywcag