Storybook Web 组件：将数组作为组件属性发送

Question

我正在使用 Storybook 6.5.9 渲染 Web 组件（用 Stencil 制作）。我有几个可以正常工作，但现在我正在为一个新组件创建一个故事，该组件可以接收一个对象数组属性。

该组件将是这样的：

import {Component, Host, h, Prop} from '@stencil/core';

@Component({
  tag: 'test-component',
})

export class TestComponent {
  /**
   * Array of options for the group.
   */
  @Prop() items?: String[] = [];

  render() {
    return (
      <Host>
        {
          this.items.map(item => (
            <h1>{item}</h1>
          ))
        }
      </Host>
    )
  }
}
      

这就是故事：

import { Story, Meta } from '@storybook/html';

export default {
  title: 'Components/TestComponent',
  parameters: {
    options: {
      showPanel: true
    },
  }
} as Meta;

const Template: Story = (args) => {
  return `
    <test-component items="${['some', 'thing']}">
    </test-component>
  `;
};

export const TestComponent: Story = Template.bind({});

我尝试将

items

属性设置为字符串，但组件从未获取任何内容，它始终是一个空数组。

我在控制台中也没有收到任何错误。我肯定做错了什么，但我不知道它是什么...我一直在为这些属性使用几种其他数据类型（布尔值、字符串、数字...），但这是我第一次使用对象/数组，但我无法让它工作。

任何帮助将不胜感激。

谢谢！

Answer 1

属性在 HTML 中作为字符串传入。

在

JSON.parse(this.items)

方法中使用

render()

，以防

this.items

不是

array

：

import { Component, Host, h, Prop } from '@stencil/core';

@Component({
  tag: 'my-component',
})
export class MyComponent {
  /**
   * Array of options for the group.
   */
  @Prop() items?: string | string[] = '';

  render() {
    return (
      <Host>
        {(Array.isArray(this.items) ? this.items : JSON.parse(this.items)).map(item => (
          <h1>{item}</h1>
        ))}
      </Host>
    );
  }
}

为此，您需要将

items

作为有效的 JSON 传递，这意味着您必须对“数组”中的“字符串”使用单属性引号和双引号：

const Template: Story = (args) => `
    <test-component items='${["some", "thing"]}'>
    </test-component>
`;

如果您在组件中接收到

[object Object]

，请尝试在传递之前对您的 prop 值进行字符串化：

const Template: Story = (args) => `
    <test-component items='${JSON.stringify(["some", "thing"])}'>
    </test-component>
`;

Answer 2

您无法通过 HTML 将数组或对象设置为属性（仅在 JSX/TSX 中）。您有两个选择：

1. 将它们作为 JSON 字符串传递，并将它们解析回数组/对象；你基本上必须在组件中将它们作为字符串输入，然后在解析它们后转换类型
2. 通过脚本设置属性；有两个选项，具体取决于是否需要该选项。

<test-component></test-component>

<script>
  document.querySelector("test-component").items = ["foo"]
</script>

或者如果需要道具：

<script>
  const testComponent = document.createElement("test-component")

  testComponent.items = ["foo"]

  document.body.appendChild(testComponent)
</script>

Answer 3

我无法让任何这些解决方案为我工作，但看起来 Storybook 现在使它变得更容易。我不确定它是在哪个版本中引入的，但将此软件包升级到：

"@storybook/angular": "7.6.17",

您现在可以访问新函数 argsToTemplate。可以在这里找到文档：

https://storybook.js.org/docs/essentials/controls#complete-custom-args

这是一个我需要将数据传递到组件中的 ng-content 的示例。所有参数都将分配给组件：

import {  argsToTemplate } from '@storybook/angular';
export const ComponentStory: Story = {
  args: {
    ...Default.args,
   // Additional args if needed
  },
  render: (args) => {
    return {
      props: args,
      template: `
        <component-name ${argsToTemplate(args)}>
          Actions
        </component-name>
      `,
    };
  },
};