React Ref

最新推荐文章于 2025-10-23 17:28:55 发布

原创

最新推荐文章于 2025-10-23 17:28:55 发布 · 734 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#hooks #react #refs

React 支持一个特殊的、可以附加到任何组件上的 ref 属性。

此属性可以是一个对象（React 16.3）、或者一个回调函数、或者一个字符串（遗留 API）。

interface RefObject<T> {
   
   
  readonly current: T | null;
}

type RefCallback<T> = {
   
    bivarianceHack(instance: T | null): void }["bivarianceHack"];

type LegacyRef<T> = string | RefCallback<T> | RefObject<T> | null;

在典型的 React 数据流中，props 是父组件与子组件交互的唯一方式。要修改一个子组件，你需要使用新的 props 来重新渲染它。但是，在某些情况下，你需要在典型数据流之外强制修改子组件。那么就可以通过 ref 获取到子组件的一个实例，或者一个dom元素。

字符串

用于类组件中，例如设置了ref="inputRef"，可以通过 this.refs.inputRef 获取到 DOM 节点/React实例

class StringRef extends React.Component {
   
   
  render() {
   
   
    return <>
      <input ref="inputRef" />&nbsp;&nbsp;
      <Button ref="btnRef" onClick={
   
   () => {
   
   
        this.refs.inputRef.value = "Click"
      }}>Click</Button>
    </>
  }

  componentDidMount() {
   
   
    console