使用 TypeScript 编写 React 组件是一种提高代码可靠性和可维护性的好方式。在 React 中，我们经常使用无状态函数组件来构建简单的 UI，这种组件没有自己的状态，只接收 props 并返回一个 JSX 元素。在这种情况下，我们可以使用 defaultProps 来为组件的 props 设置默认值，以保证组件在没有传递特定 props 时仍能正常工作。
在无状态函数组件中定义 defaultProps 非常简单。我们只需要在组件函数之前使用 defaultProps 属性来定义默认值即可。让我们看一个简单的例子：tsximport React from 'react';type GreetingProps = { name: string; age?: number;};const Greeting: React.FC = ({ name, age }) => { return ( <> Hello, {name}!
{age && You are {age} years old.
} );};Greeting.defaultProps = { age: 18,};export default Greeting; 在上面的例子中，我们定义了一个名为 Greeting 的无状态函数组件。它接收一个 name 属性和一个可选的 age 属性。在组件的返回 JSX 中，我们根据传入的 age 属性来决定是否显示年龄信息。然后，我们使用 defaultProps 来为 age 属性设置默认值为 18。这意味着，如果父组件没有传递 age 属性，那么 Greeting 组件将会使用默认值 18。这样，当我们在父组件中使用 Greeting 组件时，如果没有传递 age 属性，组件将会显示默认的年龄信息。如果传递了 age 属性，组件将显示传递的年龄信息。在无状态函数中定义 defaultProps 的好处使用 defaultProps 可以使我们的组件更加健壮和易于使用。它能够为组件的 props 提供默认值，避免了在父组件中传递默认值的繁琐过程。当我们在多个地方使用相同的组件时，不需要每次都传递相同的默认值，而是可以在组件内部统一设置默认值。这样可以减少代码冗余，提高代码的可维护性。小结在无状态函数组件中使用 defaultProps 可以为组件的 props 设置默认值。这样，当父组件没有传递特定的 props 时，组件将使用默认值。这种方式使得组件更加健壮和易于使用。在上述示例中，我们演示了如何在无状态函数组件中定义 defaultProps，并通过一个简单的 Greeting 组件展示了其用法。使用 defaultProps 可以提高组件的可维护性和代码的重用性，减少了不必要的代码冗余。希望这篇文章对你在使用 React 和 TypeScript 开发应用时有所帮助！