React函数组件中ref使用指南：解决'IntrinsicAttributes'类型报错

在React函数组件中直接使用ref属性会导致报错：'不能将类型“{ ref: MutableRefObject; }”分配给类型“IntrinsicAttributes & { children?: ReactNode; }”。类型“IntrinsicAttributes & { children?: ReactNode; }”上不存在属性“ref”。'

这是因为函数组件本身没有实例，无法直接使用ref属性。

解决方法：

在函数组件中，我们需要使用useRef和useImperativeHandle钩子来正确使用ref。

步骤：

创建ref：

在函数组件外部使用useRef创建一个ref：

jsx const importModalRef = useRef();

暴露ref：

在函数组件内部使用useImperativeHandle钩子，将ref暴露给父组件：


const ImportModal = forwardRef((props, ref) => {     // ...          useImperativeHandle(ref, () => ({       // 暴露给父组件的方法和属性       // ...     }));

  // ...   });

export default ImportModal;   ```

使用ref：

在父组件中使用组件，并传入ref属性：

jsx <ImportModal ref={importModalRef} />

现在，你可以通过importModalRef.current访问ImportModal组件中暴露的方法和属性了。

**代码示例：**jsximport React, { useRef, useImperativeHandle, forwardRef } from 'react';

const ImportModal = forwardRef((props, ref) => { const handleClose = () => { // ... 处理关闭模态框逻辑 };

useImperativeHandle(ref, () => ({ closeModal: handleClose }));

return (

{/* 模态框内容 */}

);});

const ParentComponent = () => { const importModalRef = useRef();

const handleOpenModal = () => { // ... 处理打开模态框逻辑 };

const handleCloseModal = () => { importModalRef.current.closeModal(); };

return (

);};

export default ParentComponent;

通过以上步骤，你就可以在React函数组件中正确使用ref，并避免'IntrinsicAttributes'类型的报错问题。

React函数组件中ref使用指南：解决'IntrinsicAttributes'类型报错