React技巧之设置具有默认值的可选props

原文链接：https://bobbyhadz.com/blog/react-optional-props-typescript (opens new window)

作者：Borislav Hadzhiev (opens new window)

正文从这开始~

总览

在React TypeScript中设置具有默认值的可选props：

1. 用问号将类型上的props标记为可选。
2. 在函数定义中对props进行解构时提供默认值。

详情

// App.tsx

interface EmployeeProps {
  name?: string; // 👈️ marked optional
  age?: number; // 👈️ marked optional
  country: string; // 👈️ required (no question mark)
}

function Employee({name = 'Alice', age = 30, country}: EmployeeProps) {
  return (
    <div>
      <h2>{name}</h2>
      <h2>{age}</h2>
      <h2>{country}</h2>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Employee name="Bob" age={29} country="Belgium" />

      <hr />

      <Employee country="Austria" />
    </div>
  );
}

我们标记了name和age属性作为可选的。这意味着不管有没有提供这两个属性，组件都是可使用的。

如果可选prop的值没有指定，会默认设置为undefined。没有为prop指定值，和设置值为undefined的效果是相同的。

我们还在Employee组件的定义中为name和age参数设置了默认值。

function Employee({name = 'Alice', age = 30, country}: EmployeeProps) {
  return (
    <div>
      <h2>{name}</h2>
      <h2>{age}</h2>
      <h2>{country}</h2>
    </div>
  );
}

对象中的name属性的默认值为Alice，所以如果不提供name prop，它将被赋值为Alice。

你也可以通过把props所有属性都标记为可选，来将整个props对象设置为可选。

// App.tsx

interface EmployeeProps {
  name?: string; // 👈️ all marked optional
  age?: number;
  country?: string;
}

function Employee({
  name = 'Alice',
  age = 30,
  country = 'Austria',
}: EmployeeProps) {
  return (
    <div>
      <h2>{name}</h2>
      <h2>{age}</h2>
      <h2>{country}</h2>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Employee name="Bob" age={29} country="Belgium" />

      <hr />

      <Employee />
    </div>
  );
}

EmployeeProps类型中的所有属性都被标记为可选的，因此该组件可以在不提供任何props的情况下使用。

我们为Employee组件的所有props设置了默认值，所以如果有任何props被省略了，就会使用默认值。