Question

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

TS2322：输入＆＃39; {}＆＃39;不能分配类型＆＃39; IntrinsicAttributes＆amp; FooterRightSideProps＆amp; {children？：ReactNode; }＆＃39 ;.
输入＆＃39; {}＆＃39;不能分配给＆＃39; FooterRightSideProps＆＃39; 物业＆＃39; onClickCreate＆＃39;类型＆＃39; {}＆＃39;。
中缺少

我的代码如下：

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，可以手动<Footer onClickCreate={someCallbackReference} onClickAbandon={optionalSomeCallbackReference} />或者更多可能通过HOC绑定到flux / 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)

反应类型错误

2 个答案: