复合组件 - React Typescript答案

【问题标题】：Compound Components - React Typescript复合组件 - React Typescript
【发布时间】：2020-09-28 22:18:30
【问题描述】：

我正在尝试将 React Typescript 与复合组件一起使用，但出现此错误：

JSX element type 'Nav.Content' does not have any construct or call signatures.ts(2604)

这是一个沙盒：https://codesandbox.io/s/compound-components-typescript-fjilh?file=/src/App.tsx

知道如何解决吗？

这就是我的代码的样子：

Nav.tsx

interface ContentProps {
  children: ReactNode;
}
const Content: React.FC<ContentProps> = (props: ContentProps) => (
  <div>{props.children}</div>
);
interface ContentComposition {
  Content?: React.FC<ContentProps>;
}
interface Props {
  children: ReactNode;
}
const Nav: React.FC<Props> & ContentComposition = (props: Props) => (
  <div>{props.children}</div>
);

Nav.Content = Content;

export default Nav;

App.tsx

export default function App() {
  return (
    <div className="App">
      <Nav>
        <Nav.MainContent>
          <h2>Start editing to see some magic happen!</h2>
        </Nav.MainContent>
        <h1>Hello CodeSandbox</h1>
      </Nav>
    </div>
  );
}

【问题讨论】：

标签： reactjs typescript react-typescript

【解决方案1】：

感谢 Reactiflux 的 Brady，我能够找到答案。

问题是我使用的是React.FC

更多关于React.FC的信息在这里：https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#function-components

答案如下：

interface ContentProps {
  children: ReactNode;
}
const Content = (props: ContentProps) => <div>{props.children}</div>;

interface Props {
  children: ReactNode;
}
const Nav = (props: Props) => <div>{props.children}</div>;

Nav.Content = Content;

export default Nav;

【讨论】：

这绝对有效。感谢您发布。有什么方法可以让 .Content 在输入 Nav 组件时显示为选项？

【解决方案2】：

解决此问题的一种方法如下：

import React, { FC } from 'react';

interface SubComponentProps {
    /* ... */    
}
const SubComponent: FC<SubComponentProps> = () => {
    /* ... */
};

interface ParentComposition {
    Sub: typeof SubComponent; /* or you can do FC<SubComponentProps> */
}

interface ParentProps {
    /* ... */
}
const Parent: FC<ParentProps> & ParentComposition = () => {
    /* .... */
};

Parent.Sub = SubComponent;

export default Parent;

这里的关键是使用Composition接口，在声明复合组件类型时使用。

【讨论】：