为什么我的代码返回 React 类型错误？答案

【问题标题】：Why my code is returning React Type Error?为什么我的代码返回 React 类型错误？
【发布时间】：2017-12-30 11:56:38
【问题描述】：

当我将道具传递给子元素时，我收到以下错误：

TS2322：类型“{}”不可分配给类型“IntrinsicAttributes & FooterRightSideProps & { children?: ReactNode; }'。
类型“{}”不可分配给类型“FooterRightSideProps”。
类型“{}”中缺少属性“onClickCreate”。

我的代码如下：

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 属性传递给嵌套在父元素中的子元素？

【问题讨论】：

onClickCreate 定义在哪里？

标签： javascript reactjs typescript

【解决方案1】：

您传递给FooterRightSide 的props 是FooterProps 类型，但该组件需要满足FooterRightSideProps 的道具。

【讨论】：

【解决方案2】：

export interface FooterProps extends FooterRightSideProps {} 并作为道具传递到页脚，手动 <Footer onClickCreate={someCallbackReference} onClickAbandon={optionalSomeCallbackReference} /> 或更可能通过 HOC 绑定到通量/redux 存储，例如对于 redux...

import {connect} from 'react-redux'
import {Dispatch, bindActionCreators} from 'redux'
import * as someActions from './someActions'
import {YourApplicationStateShape} from './someStateInterfaces'

// your Footer definitions here...
// modify FooterProps in that to be...
export interface FooterProps extends FooterRightSideProps {}

export default connect(
  null, // no state props need mapping in this particular case
  (dispatch: Dispatch<YourApplicationStateShape>): FooterProps => 
    bindActionCreators({ 
      onClickCreate: () => someActions.createSomething() 
      onClickAbandon: () => someActions.abandonSomething() 
    }, dispatch) 
  )(Footer)

【讨论】：