React 中具有默认值的可选道具

Shuvayan Ghosh Dastidar 2023年1月30日 2022年6月13日
  1. TypeScript 中的可选道具
  2. TypeScript 中具有默认值的可选道具
  3. 在 React 中使用 defaultProps 属性来设置 Props 的默认值
React 中具有默认值的可选道具

React 中的 Props 允许我们在不同的组件之间传递数据和参数,这些数据和参数可以流过 React 中的整个组件树。传递给不同组件的 props 可以具有定义为基本类型或用户定义类型的固定类型,就像在 TypeScript 中一样。

本教程将演示如何将 React 的可选 props 与默认值一起使用。

TypeScript 中的可选道具

在 TypeScript 中,可以使用 ? 将类型或道具设为可选操作符。这个事实可以用来在 React 中传递可选参数。

interface OptionalComponentProps {
    color? : string;
    title : string;
    size? : number;
}

在上面的示例中,包含特定组件的 props 的类型定义,colorsize 属性被定义为可选的。

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>
    )
}

因此在上面的例子中,父组件是 AppProps 类型的 props 被传递给 Card 组件。colortitle 属性由 ? 标记为可选操作符。

如果可选属性没有作为 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>
    )
}
Shuvayan Ghosh Dastidar avatar Shuvayan Ghosh Dastidar avatar

Shuvayan is a professional software developer with an avid interest in all kinds of technology and programming languages. He loves all kinds of problem solving and writing about his experiences.

LinkedIn Website