是否可以使用扩展操作符来设置响应组件道具？

Question

我想使用扩展操作符来设置组件道具。这主要是因为我不想为每个道具值使用state。这个是可能的吗？下面的代码返回一个错误，说明道具丢失了。提前感谢！

const compProps = { 
    label: 'Test Label',
    value: 'Test Value',
    icon: 'test-icon'
}

<CustomComp {...compProps} />

更新：

我使用TS on react，作为强类型语言，它不允许我有一个未定义的道具作为初始值。我通过先检查道具来解决这个问题。

{ compProps && 
    <CustomComp {...compProps} /> }

Answer 1

是的，我们可以这样做，但是你需要在大括号内使用扩展操作符。

 const compProps = { 
   label: 'Test Label',
   value: 'Test Value',
   icon: 'test-icon'
 }

 <CustomComp {...compProps} />

在子组件中，您可以访问像这个props.label这样的道具

Answer 2

是。您可以使用如下所示。

const compProps = { 
  label: 'Test Label',
  value: 'Test Value',
  icon: 'test-icon'
}

<CustomComp {...compProps} />