陣營類型錯誤

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)