ReactJS无状态组件参数

Question

ReactJS无状态组件的参数的首选/正确选择是什么？是道具还是列出所有道具名称？

选择1：

const Checkbox = props => {}

选择2：

const Checkbox = ({name, value}) => {}

Answer 1

使用组件的方式取决于组件的实现方式以及个人喜好。功能组件以props的形式作为参数传递，您可能更喜欢按原样使用它或对其进行破坏

  

选择1：const Checkbox = props => {}

大多数情况下，当您要使用的道具过多或将其全部传递给子组件时，您可能会使用上述方法

  

选择2：const Checkbox =（{name，value}）=> {}

上述模式是您从道具中解散name和value的地方。当您只需要通过所有通过的道具中的name和value时，您可以选择这样做

Answer 2

这里没有错误的选择。

如果只有几个道具，例如您的示例name和value，则可以对其进行销毁。如果您有10多个道具，我认为最好是仅使用props，然后再在组件主体中使用它们，因为它们的视觉风格是这样。

Answer 3

我认为没有首选/正确的方法 我认为经验法则应该是参数的数量。 如果您有6个以上的参数，则代码开始看起来混乱 您总是可以在组件内部使用对象销毁分配

Answer 4

选择是您自己的，两种方法都不错，根据组件使用

1）您可以在组件较大（使用更多道具）时使用：

  

选择1：const Checkbox = props => {}

2）您可以在组件较小且需要2或3个道具时使用

  

选择2：const Checkbox =（{name，value}）=> {}

使用哪种标准没有标准，这完全取决于您，但是当组件使用量很大时，choice-1使代码更简洁。