Question

我有一个像这样的简单组件：

＆＃13;

import React from 'react';
import classNames from 'classnames';

const Card: React.SFC<CardPropDef> = ({
  children,
  className,
  ...args,
}) => (
  <div
    className={classNames('card', className)}
    {...args}
  >
    {children}
  </div>
);

Card.defaultProps = {
  className: '',
};

interface CardPropDef {
  children: any;
  className?: string;
}

const CardSection: React.SFC<CardSectionPropDef> = ({
  children,
  types = [],
  ...args,
}) => {
  const classes = classNames(
    'card__section',
    types.map(type => `card__section--${type}`),
  );
  return (
    <div className={classes} {...args}>
      {children}
    </div>
  );
};

interface CardSectionPropDef {
  types: string[];
  children: any;
}

Card.Section = CardSection;

export default Card;

＆＃13;

您可以访问卡片部分，如下所示：

<Card.Section>
    Contents
</Card.Section>

但是我对如何编写或扩展定义以将该部分作为卡片SFC上的属性而感到困惑。

我的linter强调了这个问题：

财产＆＃39;部分＆＃39;类型＆＃39; StatelessComponent＆＃39;
上不存在

Answer 1

您的注释：

const Card: React.SFC<CardPropDef>

表示它只是一个React.SFC并且没有Section属性。如果您愿意，可以将其作为intersection进行相应的输入：

const Card: React.SFC<CardPropDef> & { Section : AddYourTypeHere }

如何将React组件的TypeScript接口编写为另一个组件的静态属性？

1 个答案: