Object.assign перезаписывается вне конструктора - PullRequest
Новая
       8

Object.assign перезаписывается вне конструктора

0 голосов
/ 14 февраля 2019

У меня довольно странная проблема.Я использую TypeScript и Preact для создания компонента Button.Я использую интерфейс TypeScript для проверки свойств, по существу, и использую постоянную переменную в качестве параметров «по умолчанию».Затем реквизиты применяются с помощью Object.assign и передаются в супер.Ниже приведен код: 

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>, оператор console.log в функции рендеринга был бы { color: "primary", children: {...} }.

Спасибо за чтение, и я ценю любую помощь, которую вы можете оказать!

1 Ответ

0 голосов
/ 14 февраля 2019

Вы хотите объединить реквизиты и реквизиты по умолчанию в новый объект.Так что вы можете сделать 

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