如何向 React 功能组件添加方法

Question

我有一个代码如下的组件：

const Abc: React.FC<AbcTypes> = ({...}) => {...}

Abc.getLayout = () => {...}

我不清楚如何在 Typescript 的 Abc 组件上定义/扩展方法 getLayout？

Answer 1

如果您问的是如何输入，那么您可以这样做：

const Abc: React.FC<AbcTypes> & { getLayout: () => SomeType } = ({...}) => {...}

Abc.getLayout = () => {...}

如果您正在寻求一种为您的组件定义命令式 API 的方法，那么 useImperativeHandle 就是您要找的。

这将允许父组件将 ref 附加到 Abc 并调用您定义的方法。

这里有一个如何使用它的例子：

type AbcRef = {
  getLayout: () => string[]
}
const Abc = forwardRef<AbcRef>((props, ref) => {
  useImperativeHandle(ref, () => ({
    getLayout: () => ['abc'],
  }))

  return <div>Abc</div>
})

const Parent: FC = () => {
  const abcRef = useRef<AbcRef>(null)

  useEffect(() => {
    console.log(abcRef.current?.getLayout())
  }, [])

  return <Abc ref={abcRef} />
}

如何向 React 功能组件添加方法

How to Add Method to React Functional Component

typescript

reactjs

react-functional-component