reactjs - TypeScript 中用于布尔道具的 Storybook 代码片段

Question

我从 Storybook 开始，总体而言，除了文档中的代码片段外，所有东西都开箱即用。

我用

• Nextjs 10.2.3
• 打字稿 4.3.2
• 带有附加要素的 Storybook React 6.2.9

我在此评论之后调整了我的 Storybook 配置

如果我写一个简单的标题组件：

export interface HeadingProps {
  title: string;
  alternate: boolean;
}

const Heading: FC<HeadingProps> = (props) => {
  const { title, alternate } = props;
  return (
    <TestH1 alternate={alternate} data-testid="test-header">
      {title}
    </TestH1>
  );
};

TestH1 是一个样式化的组件：

interface TestH1Props {
  alternate: boolean;
}

export const TestH1 = styled.h1<TestH1Props>`
  color: ${({ alternate }) => (alternate ? 'green' : '#0070f3')};
`;

故事书输出以下内容：

但是当布尔属性alternate为假时，我希望它显示一些实际上可以在我们的 TS 项目中复制/粘贴的内容，例如

<Heading title="Welcome to Next.js!" alternate={false} />

我看到了这条评论，但我不确定它是否相关，并且还检查了 Storybook 的 TS 文档，但不知道要调整什么。

我的故事书 main.js 如下：

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  core: {
    builder: "webpack5",
  },
}

如果您有想法或遇到同样的问题，我很想听听。祝你今天过得愉快！

标签： reactjstypescriptnext.jsstyled-componentsstorybook