React 中如何设置 Props 的默认值？

推荐答案

在 React 中，可以通过组件的 defaultProps 属性来设置 Props 的默认值。defaultProps 是一个静态属性，可以在类组件或函数组件中使用。

类组件中使用 defaultProps

-- -------------------- ---- -------
----- ----------- ------- --------------- -
  -------- -
    ------ -----------------------------
  -
-

------------------------ - -
  ----- -------
--

函数组件中使用 defaultProps

function MyComponent(props) {
  return <div>{props.name}</div>;
}

MyComponent.defaultProps = {
  name: 'Guest'
};

使用 ES6 默认参数

在函数组件中，还可以使用 ES6 的默认参数语法来设置 Props 的默认值：

function MyComponent({ name = 'Guest' }) {
  return <div>{name}</div>;
}

本题详细解读

1. defaultProps 的作用

defaultProps 是 React 提供的一个机制，用于为组件的 Props 设置默认值。当父组件没有传递某个 Prop 时，组件会使用 defaultProps 中定义的默认值。

2. 类组件中的 defaultProps

在类组件中，defaultProps 是一个静态属性，可以直接在类定义外部通过 ComponentName.defaultProps 来设置。这种方式适用于 React 16 及更早版本。

3. 函数组件中的 defaultProps

在函数组件中，defaultProps 的使用方式与类组件类似。你可以通过 ComponentName.defaultProps 来设置默认值。这种方式适用于所有 React 版本。

4. ES6 默认参数

在函数组件中，还可以使用 ES6 的默认参数语法来设置 Props 的默认值。这种方式更加简洁，且不需要额外的 defaultProps 属性。

5. 优先级

如果父组件传递了某个 Prop，那么组件会使用父组件传递的值，而不是 defaultProps 或默认参数中的值。只有在父组件没有传递该 Prop 时，才会使用默认值。

6. 注意事项

• defaultProps 是 React 的一个特性，而 ES6 默认参数是 JavaScript 的语言特性。
• 在 TypeScript 中，defaultProps 和默认参数的行为可能会有所不同，特别是在类型推断方面。

通过以上方式，你可以在 React 中为组件的 Props 设置默认值，确保组件在未接收到某些 Props 时仍然能够正常工作。