useTargetElement

一个 React Hook,通过选择器、ref、元素等方式帮助获取目标元素,SSR 友好。

演示

打开开发者工具以查看日志。

源码
#el-id
ref
div.class
id={`${id}-div`}
section

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

API

export function useTargetElement<T extends GlobalTarget>(
  target: Getterable<T>,
  options?: UseTargetElementOptions,
): RefObject<T>
export function useTargetElement<T extends Element | null>(
  target: Getterable<T>,
  options?: UseTargetElementOptions,
): RefObject<T>
export function useTargetElement<T extends keyof HTMLElementTagNameMap>(
  target: Getterable<T>,
  options?: UseTargetElementOptions,
): RefObject<HTMLElementTagNameMap[T]>
export function useTargetElement<T extends keyof SVGElementTagNameMap>(
  target: Getterable<T>,
  options?: UseTargetElementOptions,
): RefObject<SVGElementTagNameMap[T]>
export function useTargetElement<A extends AtomBaseTarget, T extends ElementTarget<A> = ElementTarget<A>>(
  target: Getterable<T>,
  options?: UseTargetElementOptions,
): RefObject<A>
export function useTargetElement<
  R extends GlobalTarget | Element,
  T extends string | null | undefined | false | MutableRefObject<AtomBaseTarget | undefined> | R,
>(target: Getterable<T>, options?: UseTargetElementOptions): RefObject<R>

元素目标 ElementTarget

ElementTarget 是一个联合类型,代表可以被定位的各种元素。

更多详情,请参见 ElementTargetElementTarget 类型