Question

我正在尝试创建一个简单的HOC，以将SideMenu添加到我的React FC中，不确定我是否做错了

HOC：

const withSideBar = <P extends object>(
  WrappedComponent: React.ComponentType<P>
): React.FC => {
  const [hidden,setHidden] = useState(false)
  return <div className="main-container">
    <div className="container">
      <SideMenu hidden={hidden} />
      <div className="column-9">
        <NavHeader callBack={() => setHidden(!hidden)} />
        <div className="main">
          <WrappedComponent />
        </div>
      </div>
    </div>

    <Footer />
  </div>
}

export default withSideBar

首页

const Home: React.FC = () => {
  return <div>HOME</div>
}

export default withSideBar(Home)

错误是：

Type 'Element' is not assignable to type 'FC<{}>'.
  Type 'Element' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any, any>

有什么想法吗？

Answer 1

您正在将withSideBar的返回值键入为React.FC，但没有返回函数，而是返回了Element。 Typescript将为您推断返回类型。在没有看到所有代码的情况下，您至少可以通过删除React.FC返回类型来克服该错误：

const withSideBar = <P extends object>(
  WrappedComponent: React.ComponentType<P>
) => {
  const [hidden,setHidden] = useState(false)
  return <div className="main-container">
    <div className="container">
      <SideMenu hidden={hidden} />
      <div className="column-9">
        <NavHeader callBack={() => setHidden(!hidden)} />
        <div className="main">
          <WrappedComponent />
        </div>
      </div>
    </div>

    <Footer />
  </div>
}

使用打字稿创建功能组件HOC

1 个答案: