为什么在 react -daisyUi 的组件中使用 { ...arg}

【问题标题】：Why { ...arg} are used inside the components of react -daisyUi为什么在 react -daisyUi 的组件中使用 { ...arg}
【发布时间】：2022-11-07 10:10:42
【问题描述】：

为什么 {...arg} 在 daisyUi 组件中传递。所有组件都有内部 {...arg} 。但它有什么作用。

  return <Button {...args} />

另一个

<Dropdown {...args}>
    <Dropdown.Toggle>Click</Dropdown.Toggle>
    <Dropdown.Menu className="w-52">
    <Dropdown.Item>Item 1</Dropdown.Item>
    <Dropdown.Item>Item 2</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>

  return <Swap {...args} />

【问题讨论】：

标签： r-daisy daisyui

【解决方案1】：

这也是我的无奈。他们的文档不是很好。基本上args 是一个道具对象，{...args} 可以用来解压该对象，就好像它们是组件的道具一样。

如果我们查看 Dropdown，我们可以设置 hover 选项，如：

const args = {hover: true}
<Dropdown {...args}>
...  //and so on

（更现实地可能来自功能道具或其他东西）

或喜欢

<Dropdown hover >
... //and so on

对我来说，它更具可读性，但如果它是更大组件或其他东西的一部分，它就不那么灵活了。

【讨论】：