js function ref

import React, { useRef } from 'react';

function TextInput() {
  const inputRef = useRef(null);

  const focusTextInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusTextInput}>Focus the input</button>
    </div>
  );
}

import React from 'react';

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

  focusTextInput = () => {
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.focusTextInput}>Focus the input</button>
      </div>
    );
  }
}

function CustomTextInput(props) {
  let textInput = null;

  const focusTextInput = () => {
    textInput.focus();
  };

  return (
    <div>
      <input
        type="text"
        ref={(element) => {
          textInput = element;
        }}
      />
      <button onClick={focusTextInput}>Focus the input</button>
    </div>
  );
}

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

  useEffect(() => {
    if (myRef.current) {
      // 在这里安全地访问DOM元素
    }
  }, []); // 空依赖数组确保只在组件挂载时运行

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