typescript 如何对 react.forwardRef 添加属性？

Question

const FooBForwardRef = React.forwardRef(() => {
  return <div>This is FooBForwardRef</div>;
});

怎么再往FooBForwardRef上添加属性FooBForwardRef.xxx并保证ts正确运行，这个类型应该怎么写呢

codesandbox地址：
https://codesandbox.io/s/m52k...

Answer 1

https://codesandbox.io/s/9yww...

look:

import * as React from "react";
import { render } from "react-dom";
import "./index.css";

// 期望是可以通过<FooB.FooA />来渲染FooA组件

// 下面是没有使用React.forwardRef时，可以正确运行的代码
const FooA: React.FunctionComponent = () => {
  return <div>This is FooA from FooB.FooA</div>;
};

const FooB: React.FunctionComponent & {
  FooA: React.FunctionComponent;
} = () => {
  return <div>This is FooB</div>;
};

// 这里是可以正确使用的示例
FooB.FooA = FooA;

// 下面是出现问题的代码(添加了React.forwardRef)
const FooBForwardRef: React.ForwardRefExoticComponent<
  React.RefAttributes<any>
> & {
  FooA?: React.FunctionComponent;
} = React.forwardRef(() => {
  return <div>This is FooBForwardRef</div>;
});

// 问题：当使用React.forwardRef时，这里无法添加FooA属性了
// 当此页面加载好typescript后，会报错: 类型“ForwardRefExoticComponent<RefAttributes<{}>>”上不存在属性“FooA”
FooBForwardRef.FooA = FooA;

render(
  <div>
    <FooB />
    <FooB.FooA />
    <FooBForwardRef />
    <FooBForwardRef.FooA />
  </div>,
  document.getElementById("root")
);

Answer 2

interface IFooBForwardRef extends React.ForwardRefExoticComponent<
  React.RefAttributes<any>
> {
    FooA: React.FunctionComponent
}
const FooBForwardRef = React.forwardRef(() => {
  return <div>This is FooBForwardRef</div>;
}) as IFooBForwardRef

这样写就不会报错了

Answer 3

用高阶组件包装下
`import React from 'react'
import A from './a.jsx'
import PropTypes from 'prop-types';
function AasParent(props){
const ForWardedComponent = React.forwardRef((props, ref) => <div ref={ref}> {props.children} </div>);

  return (
            <A {...props}>
              <ForWardedComponent  ref={props.forwardedRef} {...props}/> </A>) } AasParent.propTypes = { forwardedRef: PropTypes.object, 
              }
              module.exports=AasParent`