Question

我正在尝试将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>
  );
}

Answer 1

感谢Reactiflux的布雷迪，我找到了答案。

问题是我正在使用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;

复合成分-反应打字稿

1 个答案: