标签: storybook

如果我为以下组件创建故事，我只会收到几条红框内的消息，其中不包含任何我可以从中获得任何见解的信息：

import React, { useState, useContext } from "react";
import { FormGroup, FormControl, Col } from "react-bootstrap";
import Button from "../button/Button";
import AuthContext from "../../AuthContext";
import { useHistory } from "react-router-dom";
import LoginWarning from "./LoginWarning";

export function Login(props) {
  const [email, setEmail2] = useState("");
  const [password, setPassword] = useState("");
  const [showAlert, setShowAlert] = useState(false);
  const {
    setRole,
    setName,
    setEmail,
    setSessionId,
    setLocalStorage
  } = useContext(AuthContext);
  let history = useHistory();

  function validateForm() {
    return email.length > 0 && password.length > 0;
  } …

我找到了这个答案，但我无法用它解决问题。

我尝试在 Storybook 中加载的组件取决于通过 index.html 中的 CDN 注入的全局变量。

为了访问组件中的变量，我在文件顶部添加了此注释

/*global <variable name>*/

它在 React 应用程序中工作正常，但 Storybook 抛出此错误：<variable name> is not defined。

我尝试在文件顶部stories.js和配置文件顶部添加该注释。- 没有运气。

CDN 的 URL 位于 env 文件中。通过查看此文档，我尝试在 HTML 文件中添加第二个脚本，其中包含一个前缀为STORYBOOK_. 那也没用。

关于我能做些什么来克服这个问题有什么想法吗？

我想写故事书装饰器。有没有办法preview.js用打字稿来写它？

我已经成功地在 TS 中编写故事本身，现在想在 TS 中编写故事书配置。

这是我的组件的样子

<template>
 <div v-html="someHtml"></div>
</template>

 <script>
 export default {
   name: "test",
   props: {
    someHtml: String,
   },
 }
 </script>

组件在故事书中的使用方式：

export const testtest = () => ({
  components: {test},
  props: {
    someHtml: {default: text('somehtml', '<a href="link" class="link text-theme">see data</a>')}
},
template: `
    <test v-bind="$props"/>
`,
});

输出始终是 html 原始字符串，如下所示 ==>

<a href="link" class="link text-theme">see data</a>

文档很清楚用法，但它仍然对我不起作用。

我将原始 html 作为道具传递。当我使用 vue js 数据中的原始 html 时，它正在工作并且能够“解析”html 字符串并正确呈现它。

我想为我的 Badge 组件传递数据道具，但库中的array方法有问题addon-knobs。Data prop 是一个对象数组，我试图像这样传递它：

const data = [
  object('First', {color: '#fa2dac', text: 'RSS'}),
  object('Second', {color: '#fa2dac', text: 'RSS'}),
];

这给我的结果是我有 2 个字段（第一个和第二个），但是当我想更改内部的值时，它们不会在屏幕上更新。

第二次尝试：

const data = array('List of items', [
  object('First', {color: '#fa2dac', text: 'RSS'}),
  object('Second', {color: '#fa2dac', text: 'RSS'}),
]);

这给了我相同的结果，但我得到了 3 个字段而不是 2 个字段，而第三个字段具有价值 [object Object]

第三次尝试：

const data = array('List of items', [
  {color: '#fa2dac', text: 'RSS'},
  {color: '#fa2dac', text: 'RSS'},
]);

这给我只提交了 [object Object]

如何添加带有对象数组的旋钮并进行全面更新？

目前我正在手动添加图标，但对于几个图标来说，这种方式没有问题。但如果有 100 个图标，这就成了一个真正的问题。我怎样才能使这个可重复使用。所以我可以应用这个元素，这样它就可以是我想要的任何图标。最后它应该看起来像这样。

<Icon icon='login' color="yellow" mr="10px" fontSize="20px" />

<Icon icon='login' color="yellow" mr="10px" fontSize="20px" />

我不明白为什么我会收到这个错误 Property 'args' does not exist on type (args: Props) => Element

我正在尝试将 args 添加到我的 Storybook 组件中。这是我的.stories.tsx文件的样子

import React from "react";
import { Story, Meta } from "@storybook/react";

import { Props, Button } from ".";

export default {
  title: "General/Button",
  component: Button
} as Meta;

const Template = (args: Props) => <Button {...args} />;

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

PrimaryA.args = {  <-- ERROR
  variant: "primary"
};

以及.tsxButton 组件的简单文件

import { css } from "@emotion/react";
import …