React回调形式的ref

在React中，我们可以使用回调形式的ref来引用组件或DOM元素。回调形式的ref允许我们在组件渲染后执行自定义的回调函数，并将组件或DOM元素的引用作为参数传递给回调函数。

回调形式的ref

创建回调形式的ref

要使用回调形式的ref，我们需要在组件中定义一个回调函数，并将其作为ref属性的值。

以下是一个示例，展示了如何创建回调形式的ref：

代码语言：javascript复制

import React from 'react';

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

  componentDidMount() {
    console.log(this.myRef); // 访问ref引用的组件或DOM元素
  }

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

  render() {
    return <div ref={this.setRef}>Hello, World!</div>;
  }
}

在上面的示例中，我们在MyComponent组件中定义了一个setRef回调函数，并将其作为ref属性的值。在setRef函数中，我们将传递给它的参数（即组件或DOM元素的引用）保存在this.myRef变量中。

访问回调形式的ref

要访问回调形式的ref所引用的组件或DOM元素，我们可以在回调函数中使用对应的参数。

以下是一个示例，展示了如何访问回调形式的ref：

代码语言：javascript复制

import React from 'react';

class MyComponent extends React.Component {
  componentDidMount() {
    console.log(this.myRef); // 访问ref引用的组件或DOM元素
  }

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

  render() {
    return <div ref={this.setRef}>Hello, World!</div>;
  }
}

在上面的示例中，我们在componentDidMount生命周期方法中访问了回调形式的ref所引用的组件或DOM元素。

需要注意的是，回调形式的ref是在组件渲染后执行的，因此在组件的componentDidMount或后续生命周期方法中访问ref是安全的。

react

0 人点赞