react 如何使用 carentRef

在 React 中，使用 `createRef()` 函数创建一个 ref 对象，然后将它传递给需要引用的元素或组件。使用 `ref.current` 属性可以访问该元素或组件。

例如，在类组件中，您可以将 ref 传递给组件的实例。然后，您可以使用 `ref.current` 访问该实例的属性和方法。

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

  componentDidMount() {
    this.myRef.current.focus();
  }

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

在上面的例子中，`myRef` 通过 `ref` 属性传递给了一个 `input` 元素。`componentDidMount` 生命周期方法中，我们使用 `ref.current` 获取该元素，并聚焦到它上面。

在函数组件中，您可以使用 `useRef` 钩子来创建 ref。使用方式与 `createRef` 类似，只是需要使用 `current` 属性来访问元素或组件。

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

  useEffect(() => {
    myRef.current.focus();
  }, []);

  return <input type="text" ref={myRef} />;
}

在上面的例子中，`myRef` 通过 `ref` 属性传递给了一个 `input` 元素。使用 `useEffect` 钩子，我们在组件挂载后使用 `ref.current` 获取该元素，并聚焦到它上面。注意，我们需要传递一个空数组给 `useEffect`，以确保它只在组件挂载时运行一次。