React 之 component props 兼容父组件传入和 state 传入

问题描述

现在大部分项目流行用 react + typescript 来开发,那么大概率会用到 tslint 来做一些语法验证等。

前段时间在开发的时候遇到了这样的问题,我有一个 component 的组件,这个组件一部分的 props 需要从父组件传入, 一部分的组件又需要从 state 里面获取。

如果直接把需要从 state 获取的字段写到定义好的 props 类型上的话, tslint 总是提示你父类没有传入这个值, 它可能是 undefined, 就不断地报错。你把它设置为可选项吧,又必需给一个初始值,后面的一些类型推断又会报错,非常头疼。

如果全部直接从父组件传入的话,一层一层地传,非常麻烦。后来研究了一下,找到了解决方案。

直接上代码

// OwnProps 代表需要从父组件传入
interface OwnProps {
    name: number;
    book: string;
}
// StateProps 代表是从 state 取的
interface StateProps {
    age: number;
}
// DispatchProps 把一些操作 redux 的方法放在 props 上, 可有可无
interface DispatchProps {
    changeAge: () => void;
}
// 这里给一个总的 props 类型即可
type Props = StateProps & DispatchProps & OwnProps;
// 这是自定义的内部 state
interface MyState {
    isChild: boolean;
}

class MyAccount extends React.Component<Props, MyState> {
    constructor(props: Props) {
        super(props);
        this.state = {
            isChild: false
        };
    }

    render() {
        // ...
    }
}

const mapStateToProps = (state: State, currentProps: OwnProps): StateProps => ({
    age: state.age,
});

const mapDispatchToProps = (dispatch: Dispatch<object>): DispatchProps =>
    bindActionCreators(
        {
            changeAge
        },
        dispatch
    );
// 最后这里就是重点了, 向外暴露的一定是 OwnProps 的类型
export default connect<StateProps, DispatchProps, OwnProps>(mapStateToProps, mapDispatchToProps)(MyComponent);

 

最主要的就是把 Props 的类型分开来定义,然后对外暴露只需要传入 props 的类型, 就能让 tslint 知道哪些是从父组件传入的, 哪些需要从 state 获取的啦!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top