JS prop默认2种类型|极客教程

JS prop默认2种类型

在 JavaScript 中，prop 是指传递给组件的属性，可以通过父组件向子组件传递数据。在 React 和 Vue 等框架中，prop 是非常常见的概念。在这篇文章中，我们将详细讨论 JS 中 prop 的默认两种类型。

1. 传递数据类型的 prop 默认值

首先，我们将讨论一种最常见的 prop 类型，默认值是传递给组件的数据类型。当我们定义一个组件并声明了一个 prop 类型时，如果未给该 prop 传递任何值，它将使用默认值。

让我们以 React 为例，创建一个简单的组件来说明：

import React from 'react';

const MyComponent = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

MyComponent.defaultProps = {
  name: 'World',
};

export default MyComponent;

在上面的代码中，我们定义了一个名为 MyComponent 的组件，并声明了一个 prop 类型 name。如果未给 name 传递任何值，它将使用默认值 'World'。然后，我们在组件中使用 name prop 来显示一条问候语。

现在，如果我们将 MyComponent 组件加载到父组件中，并未给 name 传递任何值：

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent />;
};

export default App;

输出将是：

Hello, World!

因为我们未给 name 传递任何值，它使用了默认值 'World'。

2. 函数类型的 prop 默认值

另一种常见的 prop 类型是函数类型，这时的默认值是一个函数而不是一个具体的数据类型。在这种情况下，我们可以通过传递默认的函数来定义 prop 的默认值。

还是以 React 为例，假设我们定义了一个接受函数类型 prop 的组件 Button：

import React from 'react';

const Button = ({ onClick }) => {
  return <button onClick={onClick}>Click me!</button>;
};

Button.defaultProps = {
  onClick: () => {
    console.log('Click!');
  },
};

export default Button;

在上面的代码中，我们定义了一个名为 Button 的组件，并声明了一个函数类型的 prop onClick。如果未给 onClick 传递任何值，它将调用默认函数，并输出 'Click!'。

然后，我们可以在父组件中使用 Button 组件，并根据需要传递自定义的 onClick 函数：

import React from 'react';
import Button from './Button';

const App = () => {
  const handleClick = () => {
    console.log('Custom Click!');
  };

  return <Button onClick={handleClick} />;
};

export default App;