javascript - 为什么我的代码返回 React Type Error？

Question

当我将 props 传递给子元素时，出现以下错误:

TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & FooterRightSideProps & { children?: ReactNode; }'.
Type '{}' is not assignable to type 'FooterRightSideProps'.
Property 'onClickCreate' is missing in type '{}'.

我的代码如下:

import React from "react";

import CSSModules from "react-css-modules";

import styles from "./Footer.module.sass";

import { Icon } from "@components/icon/Icon";
import { Link } from "@components/typography/link";
import { Button } from "@components/button/Button";

export interface FooterProps {
}

export const Footer: React.SFC<FooterProps> =
  CSSModules(styles)
  (
    (props: FooterProps) =>
    <div styleName="footer">
      <FooterLeftSide />
      <FooterRightSide { ...props } /> //an error occurs here
    </div>
  );

export const FooterLeftSide: React.SFC =
  CSSModules(styles)(
    () =>
    <div styleName="footer-left-side"></div>
  );

export interface FooterRightSideProps {
  onClickAbandon?: () => void;
  onClickCreate: () => void;
}

export const FooterRightSide: React.SFC<FooterRightSideProps> =
  CSSModules(styles)
    (
      (props: FooterRightSideProps) =>
        <div styleName="footer-right-side">
          <Link
            className="option-back"
            styleName="header-option"
            onClick={props.onClickAbandon}
          >
            <div styleName="icon-with-label">
              <Icon name="left" />
            </div>
            Abandon
          </Link>
          <Button
            onClick={props.onClickCreate}
            theme="primary-white"
          >
            Create Profile
          </Button>
        </div>
    );

你们中有谁知道如何将这个 onClickCreate 属性传递给嵌套在父元素中的子元素吗？

Answer 1

您传递给 FooterRightSide 的

props 的类型为 FooterProps，但此组件需要满足 FooterRightSideProps 的 props >.