无法在react js中正确使用Refs，无法读取未定义的属性

在React中，Refs提供了一种访问DOM节点或在函数组件中访问React元素的方式。如果你遇到无法正确使用Refs，无法读取未定义的属性的问题，可能是由于以下几个原因：

基础概念

Refs是React提供的一种机制，用于在组件外部访问组件内部的DOM节点或其他React元素。它们通常用于直接操作DOM元素，触发事件监听器，或者集成第三方库。

类型

字符串Refs：旧的方式，通过ref属性指定一个字符串，然后通过this.refs访问。
回调Refs：通过在ref属性中传递一个回调函数来创建Refs。
React.createRef()：在React 16.3版本后推荐使用，通过React.createRef()创建Refs。

应用场景

管理焦点、文本选择或媒体播放。
触发命令式动画。
集成第三方DOM库。

常见问题及解决方法

问题：无法读取未定义的属性

这通常是因为在组件挂载之前尝试访问了Refs。

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

  componentDidMount() {
    // 此时可以安全地访问this.myRef.current
    console.log(this.myRef.current);
  }

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

问题：函数组件中的Refs

在函数组件中使用Refs需要使用useRef钩子。

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    // 此时可以安全地访问myRef.current
    console.log(myRef.current);
  }, []);

  return <div ref={myRef}>Hello, World!</div>;
}

问题：类组件中的回调Refs

如果你更喜欢使用回调Refs，可以这样写：

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

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