我有一些嵌套的组件(这样就有了一个关注点分离),它们传递可选组件:
const FooBarMenu = ({ match }) => {
return <div>
{isFooBarLoadable ? (
<FooBarLoader action={action} label='Foo Bar' selector={getLoadedFooBar}>
<FooBar />
</FooBarLoader>
) : <FooBarPlaceholder />}
};
那么<FooBarLoader>
看起来像这样:
type FooBarLoaderProps = {
action: Function,
children?: React.ReactNode,
selector: (state: MyProjectState) => MightError<string>,
props: {} // <-- this worked, but is where issues start
}
const FooBarLoader = ({
action,
children = undefined,
selector,
...props
}: FooBarLoaderProps) => {
// do stuff to load FooBars (or not)
const error = useSelector(compose(getErrorFromState, selector));
// etc...
return (
<LoadingSpinner
error={error}
{...props}
>
{children}
</LoadingSpinner>
)
}
我们的LoadingSpinner
如下所示:
type LoadingSpinnerProps = {
children?: React.ReactNode,
error?: string,
label?: string,
// etc... many more optional props
};
const LoadingSpinner = ({
children = undefined,
error = undefined,
label = '...',
// etc... many more props with defaults
}: LoadingSpinnerProps) => {
// figure out if we needs to show an error etc
// show label
// Show spinning progress
};
问题是现在我正在转换javascript组件FooBarMenu以使用typescript,我看到FooBarLoader
预期label
作为props
的一部分的问题,但这不适用于类型的声明方式?
我看到类型"IntrinsicAttributes & FooBarLoaderProps"上不存在"属性标签"。尝试在FooBarLoaderProps
中使用props: Partial<{ label: string }>
时仍然会发出不知道标签是什么的声音。
如果我有:
type FooBarLoaderProps = {
action: Function,
children?: React.ReactNode,
selector: (state: MyProjectState) => MightError<string>,
label?: string,
props: {},
}
我提供了label
,它抱怨我没有props
prop (即使之前看起来很好?),相反,我需要将两者都标记为可选,这似乎忽略了label
是 prop 的一部分这一点。
我应该如何声明FooBarLoaderProps
类型,以便在props
中包含可选的props?
1条答案
按热度按时间byqmnocz1#
您可能没有得到第二个错误,因为第一个错误阻止了它。
你声明了
props
,但是你没有使用它。组件中的...props
和你类型中的props
不一样。你可以随意命名第一个。您的类型应如下所示:
或