Reactjs 如何添加方法来反应功能组件

我有一个组件，其代码如下：

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

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

const Abc:React.FC=（{…}）=>{…}
Abc.getLayout=（）=>{…}

---

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

getLayout

？

如果您询问如何键入，则可以执行以下操作：

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

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

---

坏主意。请使用

useState

或

useffect

代替。谢谢，这样做了。

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} />
}