如何在函数组件中使用ref访问组件的方法?

Question

我试图使用createRef()访问组件方法，但我得到TypeError: modalRef.current is null错误返回。

我以前从未使用过refs，所以如果它是错误的指导方式如何实现我想要做的。

这是我的尝试

const parent = () => {
const modalRef = createRef();
const onBtnClick = () => {
modalRef.current.upadeState();
}
return(
<div>
<button onclick={onBtnClick}>bro</button>
<Modal ref={modalRef} />
</div>
)
}

模态

export default Modal = () => {
const upadeState = () => {
console.log('It works fam');
}
return(
<div>
bro we here
</div>
)
}

Answer 1

为了在钩子中从父组件调用子组件方法，我们使用React。forwardRef和React。useImperativeHandle钩子从React.

下面是一个调用子方法的例子。

Child.js

import React from "react";
const { forwardRef, useState, useImperativeHandle } = React;
// We need to wrap component in `forwardRef` in order to gain
// access to the ref object that is assigned using the `ref` prop.
// This ref is passed as the second parameter to the function component.
const Child = forwardRef((props, ref) => {
const [state, setState] = useState(0);
const getAlert = () => {
alert("getAlert from Child");
setState(state => state + 1)
};
// The component instance will be extended
// with whatever you return from the callback passed
// as the second argument
useImperativeHandle(ref, () => ({
getAlert,
}));
return (
<>
<h1>Count {state}</h1>
<button onClick={() => getAlert()}>Click Child</button>
<br />
</>
);
});

Parent.js

import React from "react";
const { useRef } = React;
export const Parent = () => {
// In order to gain access to the child component instance,
// you need to assign it to a `ref`, so we call `useRef()` to get one
const childRef = useRef();
return (
<div>
<Child ref={childRef} />
<button onClick={() => childRef.current.getAlert()}>Click Parent</button>
</div>
);
};

呈现子组件，并使用React创建ref。用户名为children。我们在父组件中创建的按钮现在被用来调用子组件函数childRef.current.getAlert();