Javascript 在React中重用组件的正确方法？

这是一个简化的代码。 下面是一个按钮组件：

import React from 'react'
import styles from './Button.module.scss'

const Button = (props) => {
  return (
    <button type={props.type} className={styles.btn} onClick={props.handleClick}>{props.text}</button>
  )
}

export default Button

在我需要一些

handleClick

逻辑的地方，我会传递它：

<Button text="Do Something" type="button" handleClick={()=> console.log('clicked')} />

console.log（'clicked'）}>

---

这是重用组件的正确方法，还是在这种情况下我应该有两个不同的组件？通过不传递道具使其可重用感觉不好。谢谢。

我认为不向组件传递道具是完全可以的。在许多库中，都有默认的道具。在PropTypes库中，您可以使用

defaultProps

来提供默认值，这样开发人员就不必每次都指定它们。

我认为不将props传递给组件是完全正确的。在许多库中，都有默认的道具。在PropTypes库中，您可以使用

defaultProps

来提供默认值，这样开发人员就不必每次都指定它们。

这很完美，事实上，通过道具使组件可重用是最佳实践，除非这种方式使组件变得不必要的复杂，否则不要使用它，转而采用两部分法

---

提示：我们有一个组件

a

，它已经可以重复使用了，但是，我们想为它添加另一个功能，以支持其他用例，但这会使组件变得复杂，在这种情况下，构建一个新组件

A2

更可取。

事实上，它是完美的，通过道具使组件可重用是最佳实践，除非这种方式使组件变得不必要的复杂，否则不要使用它，而是采用双组件方法

---

提示：我们有一个组件

a

，它已经可以重复使用，但是，我们想为它添加另一个功能，以支持其他用例，但这会使组件变得复杂，在这种情况下，构建一个新组件

A2

更可取。

有时很难决定。所以我总是带着的意图去做。每个组件都有一个意图/目的。如果我们使用一个属性来稍微自定义行为，那么它是完全正确的<代码>按钮带有用于单击绑定的可选手柄

---

但是，当我们处理一些重要属性时，这些属性可能会使组件表现为不同的组件（不同的意图），那么最好使用两个组件，以避免使用上的歧义。像

ClickableButton

和

SimpleButton

有时很难决定。所以我总是带着的意图去做。每个组件都有一个意图/目的。如果我们使用一个属性来稍微自定义行为，那么它是完全正确的<代码>按钮带有用于单击绑定的可选手柄

---

但是，当我们处理一些重要属性时，这些属性可能会使组件表现为不同的组件（不同的意图），那么最好使用两个组件，以避免使用上的歧义。就像

ClickableButton

和

SimpleButton

一样，它完全没问题

onClick

将只接收

undefined

，然后被React忽略。这完全可以

onClick

将只接收

undefined

，然后React将忽略它。

<Button text="Do Something" type="button" handleClick={()=> console.log('clicked')} />