接口中的React.ref属性

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

  componentDidMount() {
    // 在组件挂载后，可以通过this.myRef访问DOM元素
    console.log(this.myRef);
  }

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

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

  componentDidMount() {
    // 在组件挂载后，可以通过this.myRef.current访问DOM元素
    console.log(this.myRef.current);
  }

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

const MyInput = React.forwardRef((props, ref) => (
  <input ref={ref} {...props} />
));

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

  componentDidMount() {
    // 可以直接访问子组件的DOM元素
    console.log(this.inputRef.current);
  }

  render() {
    return <MyInput ref={this.inputRef} />;
  }
}