ForwardRef 🔗

forwardRef 🔗

ref 🔗

Ref挂载到DOM元素上时，就是对DOM元素本身的使用
Ref挂载到Class组件的时候，就是class组件实例的引用，可以调用实例本身的属性和方法
Ref不能作用到函数式组件上，函数式组件没有实例，所以就要使用这个forwardRef包裹一下函数式组件

ForwardRef 🔗

ForwardRef在react中用作ref转发

fowardRef传入一个函数，返回值是一个react组件

React.forwardRef()

其中第二个参数就是ref, 可以透传到任意dom元素上

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const Demo = React.forwardRef<HTMLDivElement, {}>((props, ref) => {

	return (
    <div {...restProps}>
      <div ref={ref} className={cls} style={style}>
        //...
      </div>
    </div>
  );
})

useImperativeHandle 🔗

函数式组件中配合useImperativeHandle一起使用

当你函数式组件需要暴露给外部组件一个对象时，需要使用useImperativeHandle勾子函数进行暴露

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const Child = forwardRef((props, ref) => {
  const [color, setColor] = useState("red");
  // To customize the value that the parent will get in their ref.current: 
  // pass the ref object to useImperativeHandle as the first argument. 
  // Then, whatever will be returned from the callback in the second argument, 
  // will be the value of ref.current. 
  // Here I return an object with the toggleColor method on it, for the parent to use:
  useImperativeHandle(ref, () => ({
    toggleColor: () => setColor(prevColor => prevColor === "red" ? "blue" : "red")
  }));
  return <div style={{backgroundColor: color}}>yo</div>;
});


class Parent extends Component {
  childRef = createRef();
  handleButtonClicked = () => {
    // Ref passed to a function component wrapped in forwardRef.
    // Note that nothing has changed for this Parent component
    // compared with the class component in example 2!
    this.childRef.current.toggleColor();
  }
  render() {
    return (
      <div>
        <button onClick={this.handleButtonClicked}>toggle color!</button>
        <Child ref={childRef} />
      </div>
    );
  }
}

React ForwardRef用法

ForwardRef 🔗

forwardRef 🔗

ref 🔗

ForwardRef 🔗

useImperativeHandle 🔗