Question

下面的示例输出SomeClass的实例-可以正常工作。问题：是否可以忽略DisplayModelComponentProps接口，直接传递要显示为prop的对象？

class SomeClass {
  public someProperty:string = "some string";
  public someFunction():string { return "another string"; }
}

interface DisplayModelComponentProps {
    obj:SomeClass
}

const DisplayModelComponent: React.FC<DisplayModelComponentProps> = props => {
  return(<p>{props.obj.someProperty}</p>
  )
}

export function Test(): JSX.Element {
 const someObj:SomeClass = new SomeClass();
 const props = { obj: someObj }

  return(<div><DisplayModelComponent {...props}></DisplayModelComponent></div>)
}

当我更改代码以使DisplayModelComponent将SomeClass作为prop时，会出现此错误（因为该函数在解构时丢失）：

Property 'someFunction' is missing in type '{ someProperty: string; }' but required in type 'SomeClass'.

Answer 1

发生错误是因为传播SomeClass实例时someFunction属性丢失了。这就是为什么Typescript抱怨组件道具中缺少someFunction。

您可以检查有关散布运算符以及如何复制属性的以下答案：Does the spread operator not copy over the prototype?

考虑到这一点，我认为只要您试图用作接口的类中涉及方法，您就无法做到这一点。

用Typescript反应使用类对象作为prop

1 个答案: