用使用Storybook

Question

我正在使用基UI构建我的组件(基本上只是对它们的原语进行样式化，并将它们一起导出)。例如，我的Checkbox.tsx文件中有这样的内容：

import { CheckIcon as StyledCheckIcon } from '@radix-ui/react-icons'
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
import { styled } from '@stitches/react'

const StyledContainer = styled('div', {
    ...
})

const StyledCheckbox = styled(CheckboxPrimitive.Root, {
    ...
})

const StyledIndicator = styled(CheckboxPrimitive.Indicator, {
    ...
})

const StyledLabel = styled('label', {
    ...
})

export const Container = StyledContainer
export const Root = StyledCheckbox
export const Indicator = StyledIndicator
export const CheckIcon = StyledCheckIcon
export const Label = StyledLabel

我可以通过以下方式在App.tsx中使用它：

import * as Checkbox from "./components/Checkbox";

function App() {
  return (
    <Checkbox.Container>
      <Checkbox.Root id="c1" defaultChecked>
        <Checkbox.Indicator>
          <Checkbox.CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Root>
      <Checkbox.Label htmlFor="c1">
        Accept terms and conditions
      </Checkbox.Label>
    </Checkbox.Container>
  )
}

但是，当我想为这个组件创建一个故事时，它会变得有点困难(主要是因为它不仅仅是一个组件，它是一个复合的)。我可以在我的Checkbox.stories.tsx中执行以下操作

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import * as Checkbox from '../components/Checkbox';

const CheckboxComponent:any = function() {
  return (
    <Checkbox.Container>
      <Checkbox.Root id="c1" defaultChecked>
        <Checkbox.Indicator>
          <Checkbox.CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Root>
      <Checkbox.Label htmlFor="c1">
        Accept terms and conditions
      </Checkbox.Label>
    </Checkbox.Container>
  )
}

export default {
  title: 'Example/Checkbox',
  component: CheckboxComponent,
} as ComponentMeta<typeof CheckboxComponent>;

const Template: ComponentStory<typeof CheckboxComponent> = (args) => <CheckboxComponent {...args} />;

export const Default = Template.bind({});

它运行良好，输出是一个复选框，但我不能自动控制Root和Indicator上的道具，它们是类型为来自基数的复选框文档的基元。我如何使用与基数成分的故事簿？

Answer 1

如果我没有错，您将args传递给CheckboxComponent，但是您的函数不需要任何参数。

const CheckboxComponent:any = function() {
      return (...)
}

如果你想通过故事书来控制它，你必须处理它。我认为这篇文章应该能帮助你https://storybook.js.org/docs/react/writing-stories/introduction#using-args