您可以在 CSF 格式的 html 故事书中使用装饰器吗？

Question

我正在尝试使用 CSF 格式的装饰器。我在文档中尝试过这个示例，但由于它是为 React 编写的，因此对我不起作用。

export default {
  title: 'My Component',
  decorators: [(Story) => <div style={{ margin: '3em' }}><Story/></div>]
}

目前是否可以在 html 的组件或故事级别上使用装饰器？

Answer 1

在 CSF 中，故事是一个返回“故事对象”的函数。该对象由依赖于所用框架的渲染器渲染。

装饰器只是另一个函数，它接受一个故事，并生成要渲染的对象。这个概念是全球性的，适用于所有支持的框架。

使用 html 框架，“故事对象”只是一个用 innerHtml 渲染的字符串。因此 html 框架的有效装饰器是一个函数，它将故事函数作为第一个参数，并返回一个字符串。

decorators = [(story) => `<div style="margin: 3em">${story()}</div>`]