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

Question

为什么{...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} />

Answer 1

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

如果我们查看下拉列表，可以将hover选项设置为：

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

(更现实地说，可能来自功能道具之类的东西)

或者像这样

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

对我来说，它的可读性要高得多，但如果这是一个更大的组件或其他组件的一部分，它就不那么灵活了。

Answer 2

看起来，args是一本故事书。

请查查-

1. https://storybook.js.org
2. https://storybook.js.org/docs/react/writing-stories/args