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

14 5月

问题描述

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

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

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

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

直接上代码

 

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

发表评论

电子邮件地址不会被公开。