将类作为 React 道具传递 - 这两种实现中的哪一种是正确的？

Question

这个问题对于 TypeScript/React 黑客来说应该是一个简单的谜题。

我有一个将类对象传递给子组件的 React 组件。在子组件中，我在类对象上调用一个方法。这两个组件如下所示：

class ParentComponent extends React.Component<{}, Foo> {

  constructor(props: any) {

    super(props);

    this.state = new Foo();

  }

  render() {

    return (<ChildComponent {...this.state} />);

  }

}

class ChildComponent extends React.Component<Foo, {}> {

  render() {

    this.props.fooMethod(); // TypeError or not? fooMethod is not a function?

    return (<div/>);

  }

}

此外，我有两种不同的Foo. 其中一个有效，而另一个在子组件中引发 TypeError。 你能解释为什么只有一个 Foo 实现有效吗？

第一个 Foo 实现：

class Foo {

  constructor() {

    this.fooMethod = function(): void {};

  }

  fooMethod: () => void;

}

第二个 Foo 实现：

class Foo {

  fooMethod(): void {};

}

Answer 1

实际上，这个问题与 React 无关。正在发生的事情是这两种实现的行为彼此略有不同。以下代码：class Foo {&nbsp; constructor() {&nbsp; &nbsp; this.instanceMethod = function(): void {};&nbsp; }&nbsp; fooMethod: () => void;}const fooInstance = new Foo();用实例方法声明一个类instanceMethod。以下：class Foo {&nbsp; prototypeMethod(): void {};}const fooInstance = new Foo();用原型方法声明一个类prototypeMethod。当您使用对象解构语法时，{...this.state}只会分配自己的属性和方法（非原型）。这就是为什么第一个实现有效而第二个抛出错误的原因。