Question

我遇到了一个很奇怪的问题。我正在使用TypeScript和Preact创建一个Button组件。我使用TypeScript接口进行道具验证，实质上是使用常量变量作为“默认”道具。然后使用Object.assign应用道具并将其传递给super。代码如下：

import classNames from "classnames";
import { Component, h } from "preact";

export interface ButtonProps {
  color?: string;
  type?: "primary" | "secondary";
}

const ButtonPropsDefaults: ButtonProps = {
  color: "primary",
  type: "primary",
};

export default class Button extends Component<PButtonProps> {

  constructor(props: ButtonProps) {
    // Logs { color: "primary", type: "primary" }
    console.log(ButtonPropsDefaults);

    super(Object.assign(ButtonPropsDefaults, props));

    // Logs { color: "primary", type: "primary", children: {...} }
    console.log(this.props);
  }

  public render() {
    // Logs { children: {...} }
    console.log(this.props);

    const className = classNames({
      "button": true,
      [`button--color-${this.props.color}`]: !!this.props.color,
      [`button--type-${this.props.type}`]: !!this.props.type,
    });

    return <button className={className}>{this.props.children}</button>;
  }

}

注意console.log语句的结果。值似乎“返回”到传递给构造函数的原始状态。因此，例如，如果我将组件用作<Button color="primary">Test</Button>，则render函数中的console.log语句将为{ color: "primary", children: {...} }。

感谢您的阅读，我感谢您能提供的任何帮助！

Answer 1

您想要将道具和默认道具合并到一个新对象中。因此，您可以

super(Object.assign({}, ButtonPropsDefaults, props)) or
super({...ButtonPropsDefaults, ...props})

Object.assign在构造函数之外被覆盖

1 个答案: