类型“{}”缺少类型“”的以下属性
Type '{}' is missing the following properties from type ''"
我真的很头疼!!我一直在努力解决这个问题,但无济于事!
错误:类型 '{ fieldHandler: (e: any) => void;获取品牌:功能;品牌:品牌[]; }' 缺少类型 'BrandProps' 中的以下属性:error、errorHandler、nav、navHandler TS2739
我有一个父组件将 props 传递给子组件,还有一个高阶组件将额外的 props 传递给同一个子组件。
父组件return
return (
<Fragment>
<Brands
fieldHandler={fieldHandler}
getBrands={get_brands}
brands={brands}
/>
</Fragment>
);
高阶分量
export type WrapperProps = {
error?: boolean;
errorHandler?: Function;
nav?: object;
navHandler?: Function;
};
const stepsHoc = <P extends WrapperProps>(
OriginalComponent: React.ComponentType<P>
): React.FunctionComponent<P> => {
const NewComponent: React.FC<P & WrapperProps> = props => {
const [error, errorHandler] = useState<boolean>(false);
const [nav, navHandler] = useState<object>({
next: null,
previous: null
});
return (
<OriginalComponent
error={error}
errorState={errorHandler}
nav={nav}
navHandler={navHandler}
{...(props as P)}
/>
);
};
return NewComponent;
};
export default stepsHoc;
子组件
interface IBrand {
id: number;
name: string;
}
interface BrandProps {
error: boolean;
errorHandler: Function;
nav: object;
navHandler: Function;
fieldHandler: Function;
getBrands: Function;
brands: IBrand[];
}
const Brands: React.FC<BrandProps> = ({
fieldHandler,
getBrands,
brands,
error,
errorHandler,
nav,
navHandler
}) => {
// * Note logging of error in child = false
console.log('Log = ', error);
return (
<Fragment>
</Fragment>
);
};
export default StepsHoc(Brands);
你的问题是传递给 child 组件的道具。
根据您的 child 中的定义,这些是组件必须接收的道具:
interface BrandProps {
error: boolean;
errorHandler: Function;
nav: object;
navHandler: Function;
fieldHandler: Function;
getBrands: Function;
brands: IBrand[];
}
在您的 parent 组件中,您只传递了其中的 3 个:
<Brands
fieldHandler={fieldHandler}
getBrands={get_brands}
brands={brands}
/>
并且在 HOC 中,额外的属性可以是可选的(因此它们可能不存在,这是错误的原因)。
所以要解决这个问题,您可以将 BrandProps
接口上的额外属性设置为可选,方法是用“?”定义它们,例如 error?: boolean;
,或者您可以将它们添加到 if你认为他们必须通过
我真的很头疼!!我一直在努力解决这个问题,但无济于事!
错误:类型 '{ fieldHandler: (e: any) => void;获取品牌:功能;品牌:品牌[]; }' 缺少类型 'BrandProps' 中的以下属性:error、errorHandler、nav、navHandler TS2739
我有一个父组件将 props 传递给子组件,还有一个高阶组件将额外的 props 传递给同一个子组件。
父组件return
return (
<Fragment>
<Brands
fieldHandler={fieldHandler}
getBrands={get_brands}
brands={brands}
/>
</Fragment>
);
高阶分量
export type WrapperProps = {
error?: boolean;
errorHandler?: Function;
nav?: object;
navHandler?: Function;
};
const stepsHoc = <P extends WrapperProps>(
OriginalComponent: React.ComponentType<P>
): React.FunctionComponent<P> => {
const NewComponent: React.FC<P & WrapperProps> = props => {
const [error, errorHandler] = useState<boolean>(false);
const [nav, navHandler] = useState<object>({
next: null,
previous: null
});
return (
<OriginalComponent
error={error}
errorState={errorHandler}
nav={nav}
navHandler={navHandler}
{...(props as P)}
/>
);
};
return NewComponent;
};
export default stepsHoc;
子组件
interface IBrand {
id: number;
name: string;
}
interface BrandProps {
error: boolean;
errorHandler: Function;
nav: object;
navHandler: Function;
fieldHandler: Function;
getBrands: Function;
brands: IBrand[];
}
const Brands: React.FC<BrandProps> = ({
fieldHandler,
getBrands,
brands,
error,
errorHandler,
nav,
navHandler
}) => {
// * Note logging of error in child = false
console.log('Log = ', error);
return (
<Fragment>
</Fragment>
);
};
export default StepsHoc(Brands);
你的问题是传递给 child 组件的道具。
根据您的 child 中的定义,这些是组件必须接收的道具:
interface BrandProps {
error: boolean;
errorHandler: Function;
nav: object;
navHandler: Function;
fieldHandler: Function;
getBrands: Function;
brands: IBrand[];
}
在您的 parent 组件中,您只传递了其中的 3 个:
<Brands
fieldHandler={fieldHandler}
getBrands={get_brands}
brands={brands}
/>
并且在 HOC 中,额外的属性可以是可选的(因此它们可能不存在,这是错误的原因)。
所以要解决这个问题,您可以将 BrandProps
接口上的额外属性设置为可选,方法是用“?”定义它们,例如 error?: boolean;
,或者您可以将它们添加到 if你认为他们必须通过