ReactJ将方法作为道具从一个类传递到下一个类(使用typescript)

Question

我以前使用过react，但使用类型脚本时，我遇到了将方法作为道具传递的问题。我很难理解网上的一些例子。

类型"IntrinsicAttributes&"上不存在属性"onDrawerToggle"；IntrinsicClassAttributes&只读<｛companyId:string；｝>&只读<｛children？：ReactNode；｝>'。TS2322

import React from 'react';
import HeaderBar from './Header';
import SideDrawer from './SideDrawer';
import BackDrop from './BackDrop';
interface PassedProps extends React.Props<any> {
onDrawerToggle:any
}
interface MyState {
value: string
}

export default class FrontScreen extends React.Component <{},{sideDrawer:any},PassedProps>{
constructor(props: any) {
super(props);
this.state = {
sideDrawer: false
};
}
drawerToggleClickHandler() {
this.setState((prevState)=>{ 
this.state.sideDrawer != prevState.sideDrawer
});
}
render() {
return (
<div className="fluid-container">
<HeaderBar onDrawerToggle={this.drawerToggleClickHandler()} companyId="10"></HeaderBar>
</div>
);
}
}

我正试图将一个方法传递给下一个类，但我一直收到一个错误。我试图弄清楚这一点，因为我从未使用过打字稿，如果你能给我一个例子，我就能复制并理解它

import React from 'react';
import { Navbar, Nav, Form, Button, FormControl } from 'react-bootstrap';
import axios from 'axios';
import ProfileButton from './ProfileButton';

interface Props {
drawerClick: () => any;
}

export default class HeaderBar extends React.Component <{companyId:string},{companyName:any},{drawerClick:any}>{
constructor(props: any) {
super(props);
this.state = {
companyName: 'load',
};
}
limitTextFilter(text:string){
if(text.length > 14) {
return text.substring(0,14);
}
return text;
}
componentDidMount() {
axios.request(
{method:'get',
url:'http://localhost:3000/company'
})
.then(res  => {
this.setState({ companyName: res.data.companyName });
console.log(res)
})
}
render() {
return (
<Navbar className="cs-header-bar p-0">
<Nav className="align-middle w-100">
<Nav.Link className="text-white">        
<ProfileButton onClick={this.props.drawerClick}/>
</Nav.Link>
<Nav.Link className="text-white align-self-center">
<p className="cs-link cs-company-name">{this.limitTextFilter(this.state.companyName)} 
</p>
</Nav.Link>
</Nav>
</Navbar>

);
}
}

Answer 1

您将onDrawerToggle作为组件HeaderBar的道具传递，因此必须声明组件HeaderBar的道具类型。

type Props = {
onDrawerToggle: Function
}
export default class HeaderBar extends React.Component<Props>{
...
}

顺便说一下，您可以通过传递第二个类型参数来声明组件的状态类型：

export default class HeaderBar extends React.Component<Props, State>{
...
}