阵营类型错误

Question

当我路过道具子元素，我得到以下错误：

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

props您传递给FooterRightSide的类型为FooterProps，但此组件需要支持FooterRightSideProps的道具。

Answer 2

export interface FooterProps extends FooterRightSideProps {}并传递到页脚为道具，手动<Footer onClickCreate={someCallbackReference} onClickAbandon={optionalSomeCallbackReference} />更可能是从通过HOC，例如用于终极版结合通量/ 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)