使用类型别名获取错误

Question

我有一个组件，我在其中定义了一个类型并在代码中使用了它。这是代码：

import React from 'react';
import {withErrorBoundary} from '../../../../../ignitus-ErrorHandlingComponents/errorBoundary';
import * as S from '../styles';
import {AppIcon} from '../../../../../types/iconsTypes/iconEnums';
type Props = {
name: AppIcon;
};

export const ProfileSideNavigation:React.FunctionComponent<Props> = withErrorBoundary( () => (
<S.Container>
<S.TopSection>
<S.Avatar src="https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png" alt="Profile-pic" />
<S.ProfileDetailsContainer>
<S.Name>Sophia Carter</S.Name>
<S.Designation>Literature Student</S.Designation>
</S.ProfileDetailsContainer>
</S.TopSection>
<S.BottomSection>
<S.Icon name={AppIcon.BookmarkIcon} />
<S.Progress>21 students and 11 professors are tracking progress</S.Progress>
</S.BottomSection>
</S.Container>
));

但它给出了这个错误：

Type '{ name: AppIcon; }' is not assignable to type 'IntrinsicAttributes & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & Pick<...> & { ...; } & { ...; }'.
Property 'name' does not exist on type 'IntrinsicAttributes & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & Pick<...> & { ...; } & { ...; }'.ts(2322)

Answer 1

不应该像定义封装组件那样定义封装组件，而应该分离逻辑。

首先，使用提供的道具定义ProfileSideNavigation。

接下来，导出包裹的零部件。

这就是你可以做到的：

type Props = {
name: AppIcon;
};    
export const ProfileSideNavigation: React.FC<Props> = () => (
<S.Container>
<S.TopSection>
<S.Avatar src="https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png" alt="Profile-pic" />
<S.ProfileDetailsContainer>
<S.Name>Sophia Carter</S.Name>
<S.Designation>Literature Student</S.Designation>
</S.ProfileDetailsContainer>
</S.TopSection>
<S.BottomSection>
<S.Icon name={AppIcon.BookmarkIcon} />
<S.Progress>21 students and 11 professors are tracking progress</S.Progress>
</S.BottomSection>
</S.Container>
));
export default withErrorBoundary(ProfileSideNavigation);