[英]How to pass this TypeScript React component an optional prop?
I'm fairly new to TS and trying to understand how to pass optional props to this component that's a bit complex for me.我对 TS 相当陌生,并试图了解如何将可选道具传递给这个对我来说有点复杂的组件。 I thought you could use a?
我以为你可以用一个? for the props that you want to be optional, but I'm getting the following error:
对于您希望成为可选的道具,但我收到以下错误:
A binding pattern parameter cannot be optional in an implementation signature.
绑定模式参数在实现签名中不能是可选的。
How would I pass optional props to this component?我如何将可选道具传递给这个组件?
With Optional Props带有可选道具
export const BGVideo = React.memo(function BGVideo({ src, children, bgColor? }: any) {
return ( ^^^^^^^^
<BackgroundVideoContainer>...some other stuff...
)
});
Original原来的
export const BGVideo = React.memo(function BGVideo({ src, children }: any) {
return (
<BackgroundVideoContainer>...some other stuff...
)
});
What you're thinking of is declaring an optional property of a type.您正在考虑的是声明一个类型的可选属性。 For instance:
例如:
interface Props { bgColor?: string }
const a: Props = { bgColor: '#fff' } // valid
const b: Props = {} // valid
But the only type in your code here is any
, which is not a good practice to use as it disables all type checking.但是这里代码中的唯一类型是
any
,这不是一个好习惯,因为它会禁用所有类型检查。
So what you want to do is delcare the type for your props, which includes the optional property:因此,您要做的是删除道具的类型,其中包括可选属性:
interface Props {
src: string,
children: React.ReactNode
bgColor?: string
}
Then use that type.然后使用该类型。
export function BGVideo({ src, children, bgColor }: Props) {
return (
<>...</>
)
}
Now in that function, bgColor
has the type string | undefined
现在在 function 中,
bgColor
的类型为string | undefined
string | undefined
. string | undefined
。 A string
if it was passed a value, or undefined
if it was not passed a value.如果传递了值,则为
string
,如果未传递值,则为undefined
。
Lastly, React.memo
really isn't necesary.最后,
React.memo
真的不是必需的。 You shouldn't really ever need to wrap a function component in this way.您真的不需要以这种方式包装 function 组件。
React.memo
is more for values which you don't want to have to recompute. React.memo
更适合您不想重新计算的值。
try that:试试看:
type Props = {
src: string;
bgColor?: string;
children: React.ReactNode;
}
export const BGVideo = React.memo(function BGVideo({ src, children, bgColor }: Props) {
return (
<BackgroundVideoContainer>...some other stuff...
)
});
The Object where you are trying to add optional prop is a destructured props object and not the type of props object.您尝试添加可选道具的 Object 是解构道具 object 而不是道具 object 的类型。
You can add type for props object as follows:您可以为道具 object 添加类型,如下所示:
export const BGVideo = React.memo(function BGVideo({ src, children, bgColor }: {src: string, children: React.ReactNode, bgColor?: string}) {
return (
<BackgroundVideoContainer>...some other stuff...
)
});
Or better extract the type in a interface or type for better readability:或者更好地提取接口或类型中的类型以获得更好的可读性:
interface BGVideoProps {
src: string;
children: React.ReactNode;
bgColor?: string;
}
export const BGVideo = React.memo(function BGVideo({ src, children, bgColor }: BGVideoProps) {
return (
<BackgroundVideoContainer>...some other stuff... )
});
Here, bgColor is a optional prop这里, bgColor 是一个可选的道具
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.