react中ref如何触发

使用回调函数触发 ref

在 React 中，可以通过回调函数的方式触发 ref。将函数传递给 ref 属性，该函数会在组件挂载或卸载时被调用，参数为 DOM 元素或组件实例。

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

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

使用 useRef Hook 触发 ref

在函数组件中，可以使用 useRef Hook 创建 ref 对象，并将其赋值给组件的 ref 属性。通过访问 ref.current 可以获取 DOM 元素或组件实例。

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

  React.useEffect(() => {
    console.log(myRef.current); // 访问 DOM 元素
  }, []);

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

通过 forwardRef 转发 ref

如果需要将 ref 传递给子组件，可以使用 React.forwardRef 包装子组件。父组件可以通过 ref 直接访问子组件的 DOM 节点或方法。

const ChildComponent = React.forwardRef((props, ref) => {
  return <div ref={ref} {...props} />;
});

function ParentComponent() {
  const childRef = React.useRef(null);

  React.useEffect(() => {
    console.log(childRef.current); // 访问子组件的 DOM 元素
  }, []);

  return <ChildComponent ref={childRef} />;
}

通过 useImperativeHandle 自定义 ref 行为

如果需要控制子组件暴露给父组件的 ref 行为，可以使用 useImperativeHandle Hook。它允许自定义 ref 的返回值，而不是直接暴露 DOM 节点。

const ChildComponent = React.forwardRef((props, ref) => {
  const inputRef = React.useRef(null);

  React.useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} />;
});

function ParentComponent() {
  const childRef = React.useRef(null);

  const handleClick = () => {
    childRef.current.focus(); // 调用子组件暴露的方法
  };

  return (
    <>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Focus Input</button>
    </>
  );
}

通过回调 ref 触发副作用

可以在回调 ref 中执行副作用操作，例如监听 DOM 元素的变化或执行特定逻辑。这种方式适用于需要在 ref 更新时触发某些行为的情况。

function MyComponent() {
  const handleRef = (el) => {
    if (el) {
      el.addEventListener('click', () => {
        console.log('Element clicked');
      });
    }
  };

  return <div ref={handleRef}>Click me</div>;
}