如何在Typescript中将函数从一个反应组件传递到另一个组件?

时间:2017-08-17 14:27:06

标签: reactjs typescript

在我拥有的父组件中。哪个连接到redux,所以它有自己的状态/ dispatch / props。

<Home_User_Dash
     handleEditOpen={this.handleEditOpen.bind(this)}
     handleEditClose={this.handleEditClose.bind(this)}
/>

虽然在尝试在子组件中使用该方法时,我收到此错误消息

HandleEditOpen does not exist on type'Readonly<{ children?: ReactNode; }> & Readonly<HomeUserProps>

编辑1更多信息

HandleEditOpen和close正好相反。

public handleEditOpen() {
    this.setState({editTruckId: true});
}

connect方法,mapStateToPropsmapDispatchToProps在两个组件上都不同。在子组件上记录传入状态时,没有handleEditOpen或关闭。

export const Home_Dash = connect(mapStateToProps, mapDispatchToProps)(Home);

如果我删除HomeUser的connect方法上的输入,那么我会从传递方法的Home组件中收到此错误消息。

handleEditOpen does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ children...'

更新

删除对父方法的所有引用并运行页面并输出它们显示在组件上的道具。这似乎是组件之间纯粹的Typescript类型问题。并不是说Typescript有问题,但我不知道如何正确键入子组件。

解决?

我终于可以在不输入问题的情况下传入方法。事实证明,我需要传递方法。

<Home_User_Dash
     handleEditOpen={() => this.handleEditOpen.bind(this)}
     handleEditClose={() => this.handleEditClose.bind(this)}
/>

对于不需要在连接类型中传递方法所需的类型。它需要在类本身上添加。

interface IHomeUserProps {
    users: Iuser[];
    users_error: string;
}

interface IHomeUserInjectedProps {
    handleEditOpen: () => any;
    handleEditClose: () => any;
}

interface IHomeUserDispatchProps {
    fetchAllUsers: () => any;
}

interface IHomeUserState {
    username: string | null;
    user: Iuser | null;
    populated: boolean;
}

type HomeUserProps = IHomeUserDispatchProps & IHomeUserProps & IHomeUserInjectedProps;

class HomeUser extends Component<HomeUserProps, IHomeUserState> {

和连接方法

export const Home_User_Dash = connect<IHomeUserProps, IHomeUserDispatchProps, IHomeUserInjectedProps>(mapStateToProps, mapDispatchToProps)(HomeUser);

0 个答案:

没有答案