将类作为 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 {

  constructor() {

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

  }

  fooMethod: () => void;

}

const fooInstance = new Foo();

用实例方法声明一个类instanceMethod。

以下：

class Foo {

  prototypeMethod(): void {};

}

const fooInstance = new Foo();

用原型方法声明一个类prototypeMethod。

当您使用对象解构语法时，{...this.state}只会分配自己的属性和方法（非原型）。

这就是为什么第一个实现有效而第二个抛出错误的原因。