React 父组件调用子组件简单的方法

在React中, 我们通常使用子组件来调用父组件的方法以及属性,但是在少数情况下,也会存在父组件调用子组件方法的时候。

通过forwardRef这个hook, 可以向父组件传递ref, 父组件再通过ref来操作其内层元素.
官方示例如下

1
2
3
4
5
6
7
8
9
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

然而这个ref返回的是dom节点, 有的时候我们需要调用子组件的方法
对于这种情况, 我们可以使用useImperativeHandle, 来自定义返回的ref
官方示例如下

1
2
3
4
5
6
7
8
9
10
function FancyInput(props, ref) {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

感谢阅读