ReactJS无状态组件参数

Question

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

选项1：

const Checkbox = props => {}

选项2：

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

Answer 1

这里没有错误的选择。

如果你只有几个道具，就像你的例子中的name和value，你可以分解它们。如果你有10+道具，我认为最好只使用props，然后在组件主体中使用它们，这只是因为它的视觉风格。

Answer 2

你想使用组件的方式取决于你的组件是如何实现的，这也是个人偏好的问题。函数组件作为参数post作为props传递，您可能更喜欢按原样使用它或分解它

属性选择1: const复选框=

=> {}

大多数情况下，当有太多要使用的道具或将所有道具都传递给子组件时，可以使用上述方法

选项2: const复选框=({名称，值}) => {}

上面的模式是从道具中分解name和value的地方。当您只需要在传递的所有属性中使用name和value时，您可以选择这样做

Answer 3

我不认为有一个更好的/正确的方法来做这件事，我认为经验法则应该是参数的数量。如果你有超过6个参数，代码开始看起来很混乱，你总是可以在你的组件中使用对象解构赋值