打字稿似乎错过了将类/类型解释为值"'Classname' refers to a value but is used as type here"

Question

>我想将 React.Component 的对象作为 "this" 传递给子 React.Component，如下所示：

包含组件 1 的文件：

class Comp1 extends React.Component<...,...> {
...
render() {
return (<Comp2
comp1={this}/>)
}
}
export default withRouter(Comp1);

包含组件 2 的文件：

...
import Comp1 from "./Comp"
interface Comp2Props extends RouteComponentProps {
...
comp1: Comp1; //Here it says "... refers to a value but is being used as a type here."
}
class Comp2 extends React.Component<Comp2Props,...> {
...
}

如果在最小示例中缺少信息，请随时通知我。但基本上我所做的只是将父组件传递给子组件，以便能够从子组件对父组件进行某些函数调用。如何使 TS 将组件识别为类型而不是值？(我的项目中的类名称是"Home"，TS 内部是否有"Home"的不同用法？

Answer 1

我不认为传递整个组件是一种好的做法，如果可行的话。推荐的做法是将函数作为 props 传递给子组件，如下所示：

class Comp1 extends React.Component<...,...> {
doSomething () {
// some code
}
doAnotherThing() {
// more code
}
render() {
return ( 
<Comp2 
doSomething={this.doSomething} 
doSomethingElse={this.doAnotherThing}
/> 
)
}
}

您可以在官方文档中阅读有关此模式的更多信息。