React 中具有默认值的可选道具
Shuvayan Ghosh Dastidar
2023年1月30日
React 中的 Props 允许我们在不同的组件之间传递数据和参数，这些数据和参数可以流过 React 中的整个组件树。传递给不同组件的 props 可以具有定义为基本类型或用户定义类型的固定类型，就像在 TypeScript 中一样。
本教程将演示如何将 React 的可选 props 与默认值一起使用。
TypeScript 中的可选道具
在 TypeScript 中，可以使用 ? 将类型或道具设为可选操作符。这个事实可以用来在 React 中传递可选参数。
interface OptionalComponentProps {
color? : string;
title : string;
size? : number;
}
在上面的示例中，包含特定组件的 props 的类型定义，color 和 size 属性被定义为可选的。
interface Props {
color? : string;
size: number;
title? : string;
}
function Card(props : Props){
const { color , size, title} = props;
return (
<div>
<div>{color}</div>
<div>{size}</div>
<div>{title}</div>
</div>
)
}
function App() {
return (
<div>
<Card size={20} title="Cool card" />
</div>
)
}
因此在上面的例子中，父组件是 App，Props 类型的 props 被传递给 Card 组件。color 和 title 属性由 ? 标记为可选操作符。
如果可选属性没有作为 prop 传递给组件，它会被初始化为 undefined，因此不会显示或呈现。
TypeScript 中具有默认值的可选道具
上面的示例也可以与组件提供的默认值一起使用。
interface Props {
color? : string;
size: number;
title? : string;
}
function Card(props : Props){
const { color = 'red' , size, title = 'Default title'} = props;
return (
<div>
<div>{color}</div>
<div>{size}</div>
<div>{title}</div>
</div>
)
}
function App() {
return (
<div>
<Card size={20} title="Cool card" />
</div>
)
}
早些时候，color 属性没有被渲染，因为没有默认值，但现在因为没有值作为 props 传递，所以使用默认值来渲染组件。但是，没有使用 title 属性的默认值，因为它被传递给组件的 prop 覆盖。
在 React 中使用 defaultProps 属性来设置 Props 的默认值
React 支持为使用 defaultProps 属性传递的道具分配默认值。渲染组件时可以直接分配和使用默认值。
interface Props {
color? : string;
size: number;
title? : string;
}
const defaultProps : Props = {
color :"red",
size : 20,
title : "A cool title"
}
function Card(props : Props){
return (
<div>
<div>{props.color}</div>
<div>{props.size}</div>
<div>{props.title}</div>
</div>
)
}
Card.defaultProps = defaultProps;
function App() {
return (
<div>
<Card size={20} title="Cool card" />
</div>
)
}
