Question

我正在创建一个简单的组件，该组件既可以接受可选的道具，也可以接受任意道具以传递给它的子组件，但是我无法使这种组合完美地发挥作用。我从此处修改了示例作为示例：Typescript3 Release Notes

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）这是接受任意道具的一种好方法（更好吗？）？

Answer 1

如果您为内部组件定义了道具，则可以将它们相交（＆），以便对所有道具都具有类型安全性。

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} />;
  }
}

打字稿3，React defaultProps和passthrough道具

1 个答案: