React字符串形式的ref

在React中，我们可以使用字符串形式的ref来引用组件或DOM元素。字符串形式的ref是一种较早的ref使用方式，它允许我们通过字符串将ref与组件或DOM元素进行关联。

创建字符串形式的ref

要使用字符串形式的ref，我们需要在组件中定义一个字符串变量，并将其赋值给组件或DOM元素的 ref 属性。

以下是一个示例，展示了如何创建字符串形式的ref：

import React from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  componentDidMount() {
    console.log(this.myRef.current); // 访问ref引用的组件或DOM元素
  render() {
    return <div ref={this.myRef}>Hello, World!</div>;
}

在上面的示例中，我们在 MyComponent 组件的构造函数中使用 React.createRef() 方法创建了一个ref，并将其赋值给 this.myRef 变量。然后，我们将 this.myRef 变量作为 ref 属性传递给 <div> 元素，从而将该元素与字符串形式的ref关联起来。

访问字符串形式的ref

要访问字符串形式的ref所引用的组件或DOM元素，我们可以使用 this.refs 对象。通过 this.refs 对象，我们可以以字符串形式访问相应的ref。

以下是一个示例，展示了如何访问字符串形式的ref：

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