如何折叠故事书控件中的对象答案

【问题标题】：how to collapse objects in storybook controls如何折叠故事书控件中的对象
【发布时间】：2022-11-19 21:03:09
【问题描述】：

我在故事书的文档中搜索了 React，但我似乎无法找到如何使我的参数的对象控件默认显示为折叠状态，而不必手动折叠它。

这就是我所做的

data: {
    control: { type: 'object' },
    table: { defaultValue: { summary: 'Object' } },
    collapsed: true, // I want to find out if there is something like this
  },

这就是我所期待的

【问题讨论】：

标签： reactjs object storybook

【解决方案1】：

不幸的是，配置它的选项不存在。受此 comment 关于默认打开 RAW 视图的启发，我做了一个有点老套的解决方案，查询顶层的所有跨度以折叠其内容并使用 JavaScript 触发点击。

在文件中经理.js添加以下内容以使其工作：

const observer = new MutationObserver(() => {
  // Query the spans for collapsing objects.
  const objectCollapseSpans = [...document.querySelectorAll('.rejt-tree > .rejt-object-node > span')];
  // Query the spans for collapsing array of objects.
  const arrayCollapseSpans = [...document.querySelectorAll('.rejt-tree > .rejt-array-node > span')];
  const collapseSpans = [...arrayCollapseSpans, ...objectCollapseSpans];
  for (const span of collapseSpans) {
    if (span.className !== 'closed') {
      span.click();
    }
    span.className = 'closed'
  }
});

observer.observe(document.body, {
  childList: true,
  subtree: true,
})

【讨论】：