Question

我正在使用来自react的{{1}} 16.x和connect，我正在尝试为我的组件设置默认属性。

react-redux

但是在te interface CounterProps { incrementAsync(): void; increment(): void; decrement(): void; value?: string & number; } class Counter extends React.PureComponent<CounterProps> { render() { return ( <div> <button onClick={this.props.incrementAsync}> Increment after 1 second </button>{' '} <button onClick={this.props.increment}>Increment</button>{' '} <button onClick={this.props.decrement}>Decrement</button> <hr /> <div>Clicked: {this.props.value} times</div> </div> ); } }行中我遇到了编译错误 connect

道具的类型似乎有问题。我已检查Argument of type 'typeof Counter' is not assignable to parameter of type 'ComponentType<{ value: number; } & { incrementAsync: () => void; incre ment: () => void; decrement...'.从PureComponent延伸，其中包含Component，props: Readonly<{ children?: ReactNode }> & Readonly<P>;不允许使用可选键。

是否可以为ReadOnly设置和设置可选道具？

Answer 1

value?: string & number; - typo

您需要使用或：value?: string | number;

如果要设置defaultProps：

interface CounterProps {
  incrementAsync(): void;
  increment(): void;
  decrement(): void;
  value?: string & number;
}

class Counter extends ... {
  static defaultProps = {
    value: 0,
  };
  ...
}

或功能组件：

export const Counter:FC = ({ value = 0, ...otherProps }) => (
  ...
</div>);

TypeScript中PureComponent的可选默认道具

1 个答案: