Typescript 3, React defaultProps и passthrough props - PullRequest
Новая
       11

Typescript 3, React defaultProps и passthrough props

0 голосов
/ 08 января 2019

Я создаю простой компонент, который принимает дополнительный реквизит, но также принимает произвольные реквизиты для прохождения через его подкомпоненты, однако я не могу заставить эту комбинацию хорошо играть вместе. Я изменил образец отсюда в качестве примера: Typescript3 Замечания по выпуску 

import React from 'react';

export interface Props {
  name: string;
  [id: string]: any; // <-- Added to allow acceptance of arbitrary props
}

export class Greet extends React.Component<Props> {
  render() {
    const { name, ...divProps } = this.props;
    return <div {...divProps}>Hello {name.toUpperCase()}!</div>;
  }

  static defaultProps = { name: 'world' };
}

Использование: 

<Greet />

Как только я добавляю опцию для произвольного реквизита, я получаю следующую ошибку 

Property 'name' is missing in type '{}' but required in type 'Readonly<Props>'.

Мои вопросы:

1) Есть ли какой-нибудь известный способ принимать произвольные реквизиты и работать с defaultProps?

2) Это хороший (лучше?) Способ принять произвольный реквизит?

1 Ответ

0 голосов
/ 03 апреля 2019

Если у вас есть реквизиты, определенные для внутреннего компонента, вы можете пересекать (&) их вместе, так что вы будете иметь безопасность типов на всех ваших реквизитах. 

type Props = {
  name: string;
}

type InnerCompProps = {
  color: string,
}

const InnerComp = (props: InnerCompProps) => (<div> the color is { props.color} </div>);

export class Greet extends React.Component<Props & InnerCompProps> {
  static defaultProps = { name: 'world' };

  render() {
    const { name, ...rest } = this.props;
    return <InnerComp {...rest} />;
  }
}
...