我正在尝试使用 useImperativeHandle 但仍然收到错误“无法添加当前属性,对象不可扩展”。每个教程中的代码都以类似的方式编写并且运行正常。我缺少一些东西,但我不知道是什么。
子元素
const Toast = forwardRef((ref) => {
const [openToast, setOpenToast] = useState(true);
useImperativeHandle(ref, () => ({
show() {
alert("hello");
},
}));
return (
<div>
</div>
);
});
export default Toast;
父元素
const FooterForm = () => {
const toastRef = useRef(null);
return (
<>
<Toast ref={toastRef} />
<button
onClick={() => {toastRef.current.show();}}
type="button">
Click
</button>
</>
);
};
export default FooterForm;
我需要将 ref 传递给子组件并运行函数“show”