在React 中，如何创建refs？

王小婷

发布于 2023-10-10 08:18:21

1420

发布于 2023-10-10 08:18:21

文章被收录于专栏：编程微刊编程微刊

在 React 中，可以通过以下几种方式来创建 ref：

1：使用 React.createRef() 方法：

在类组件中，可以使用 React.createRef() 方法来创建 ref 对象。通常，在组件的构造函数中将 ref 赋值给类的实例属性。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  // ...
}

然后，可以将 ref 绑定到组件或 DOM 元素上，通过 ref 属性进行引用。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.myRef.current); // 访问 DOM 元素
  }

  render() {
    return <input ref={this.myRef} />;
  }
}

2：使用回调函数方式：

另一种方式是使用回调函数形式的 ref，通过在组件中定义一个函数，然后将其作为 ref 属性传递给组件或 DOM 元素。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = null;
  }

  componentDidMount() {
    console.log(this.myRef); // 访问 DOM 元素
  }

  setRef = (node) => {
    this.myRef = node;
  };

  render() {
    return <input ref={this.setRef} />;
  }
}

在上述示例中，setRef 是一个回调函数，它将传递给 ref 属性。当组件渲染时，React 会自动调用该回调函数，并将组件或 DOM 元素的引用作为参数传递给它。

3：使用 React.useRef() Hook：

在函数组件中，可以使用 React.useRef() Hook 来创建一个 ref 对象，并将其赋值给一个变量。

function MyComponent() {
  const myRef = React.useRef();

  useEffect(() => {
    console.log(myRef.current); // 访问 DOM 元素
  }, []);

  return <input ref={myRef} />;
}

在函数组件中，可以使用 useEffect Hook 来处理副作用，并在组件挂载完成后访问 ref。无论使用哪种方式，创建的 ref 对象都可以通过 .current 属性来访问引用的组件或 DOM 元素。需要注意的是，在组件挂载完成后访问 ref，以确保 ref.current 的值不为 null 或 undefined。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-10-09，如有侵权请联系 cloudcommunity@tencent.com 删除

react