在 React TypeScript 中使用默认值设置可选道具

作者

在 React TypeScript 中使用默认值设置可选属性

Set optional props with default values in React TypeScript

在 React TypeScript 中使用默认值设置可选属性：

  1. 使用问号将类型上的道具标记为可选。

  2. 在函数定义中    解构道具时，为道具提供默认值
    。
应用程序.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和ageprops 标记为
optional。

这意味着该组件可以在提供或不提供和道具的情况下使用。 nameage

如果未指定可选道具的值，它将设置为undefined.

不为道具提供价值和将道具设置为价值
undefined是一样的。

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

应用程序.tsx
function Employee({name = 'Alice', age = 30, country}: EmployeeProps) {
  return (
    <div>
      <h2>{name}</h2>
      <h2>{age}</h2>
      <h2>{country}</h2>
    </div>
  );
}

对象中的属性默认name设置为，因此如果
未提供该属性，它将被分配一个值.AlicenameAlice

我还写了一篇关于
如何将 create-react-app 与 TypeScript 结合使用的详细指南。

将整个props对象设置为可选

props您还可以通过将其所有属性标记为可选来将整个对象设置为可选。

应用程序.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，因此如果省略任何道具，将使用默认值。