[英]React & Redux tslint Warning
When I use react and redux.当我使用反应和 redux 时。 The
connect
method causes below tslint warning/error (I am not 100% sure about this statement too). connect
方法会导致以下 tslint 警告/错误(我也不是 100% 确定此声明)。 Component works but looking at the tslint error is killing me.组件有效,但查看 tslint 错误让我很生气。
type definition is this interface IPrivateMenuItem extends StateProps, IMenuItem, IOwnProps {}
类型定义是这个
interface IPrivateMenuItem extends StateProps, IMenuItem, IOwnProps {}
Type '{ children: string;
输入'{孩子:字符串; icon: "user";
图标:“用户”; to: string;
到:字符串; }' is not assignable to type 'IntrinsicAttributes & Pick<IPrivateMenuItem, "hasAnyAuthorities" |
}' 不可分配给类型 'IntrinsicAttributes & Pick<IPrivateMenuItem, "hasAnyAuthorities" | "id" |
“身份证” | "to" |
“到” | "icon"> & IOwnProps'.
“图标”> & IOwnProps'。 Property 'children' does not exist on type 'IntrinsicAttributes & Pick<IPrivateMenuItem, "hasAnyAuthorities" |
'IntrinsicAttributes & Pick<IPrivateMenuItem, "hasAnyAuthorities" | 类型上不存在属性 'children' "id" |
“身份证” | "to" |
“到” | "icon"> & IOwnProps'.ts(2322)
“图标”> & IOwnProps'.ts(2322)
I tried component definition like const PrivateMenuItem: React.FC<IPrivateMenuItem>
.我尝试了像
const PrivateMenuItem: React.FC<IPrivateMenuItem>
这样的组件定义。 But no chance the warning gone.但是警告没有机会消失。 Unless I remove the connect statement.
除非我删除连接语句。 Which is not possible due to redux requirement.
由于 redux 要求,这是不可能的。
Then, I switch the functional component's prop type to IPrivateMenuItem as defined below.然后,我将功能组件的 prop 类型切换为如下定义的IPrivateMenuItem 。 Then the issue is gone.
然后问题就没有了。 My question is if this is the best practice or is there an easier one?
我的问题是这是最佳做法还是有更简单的做法?
interface IPrivateMenuItem extends StateProps, IMenuItem, React.PropsWithChildren<IOwnProps> {}
The full functional component code without imports is没有导入的完整功能组件代码是
interface IOwnProps {
hasAnyAuthorities?: string[];
}
interface IPrivateMenuItem extends StateProps, IMenuItem, React.PropsWithChildren<IOwnProps> {}
const PrivateMenuItem = ({ isAuthorized, id, to, icon, children }: IPrivateMenuItem) => {
return isAuthorized ? (
<MenuItem id={id} to={to} icon={icon}>
{children}
</MenuItem>
) : (
<></>
);
};
const mapStateToProps = ({ authentication: { account } }: IRootState, { hasAnyAuthorities = [] }: IOwnProps) => ({
isAuthorized: hasAnyAuthority(account.authorities, hasAnyAuthorities),
});
type StateProps = ReturnType<typeof mapStateToProps>;
export default connect(mapStateToProps)(PrivateMenuItem);
It's a bit hard without seeing the whole component but if it helps没有看到整个组件有点困难,但如果它有帮助
The full typing for a connect is the following连接的完整类型如下
connect<TheMapStateToPropsType, TheDispatchToPropsType, TheComponentPropsType, TheStorePropsType>
You can type you component like this: (I am doing it with a class but you get the spirit for a functional component )您可以像这样键入组件:(我正在使用 class 进行操作,但您获得了功能组件的精神)
interface OwnProps { }
interface StateProps { }
interface DispatchProps { }
type Props = OwnProps & StateProps & DispatchProps;
export class MyComponent extends Component<Props> { }
const mapStateToProps = (state): StateProps => ({
})
const mapDispatchToProps = (dispatch): DispatchProps => {
return {
}
}
export default connect<StateProps,DispatchProps,OwnProps,StorePropsIfYouWant>(mapStateToProps, mapDispatchToProps)(MyComponent)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.