react-styleguidist中的动态示例

Question

全部。

我刚刚开始使用react-styleguidist，并且喜欢易用性。但是，我想在文档中添加动态示例。即文档查看者可以通过按钮，事件和其他异步互动更改道具来与之互动的示例。

现在，我似乎只能在markdown中生成这样的doc示例

js <MyComponent propOne="something static" />

在这附近，我希望能够同时进行记录和开发，而不必也使用react-storybook。

谢谢

Answer 1

来自Styleguidist文档的答案：

  

每个示例都有其自己的状态，您可以将其作为状态变量进行访问并使用setState（）函数进行更改。默认状态为{}，可以使用initialState设置。

Answer 2

这取决于您的意图，但是您当然可以开始模拟所有需要更多交互性的部分。根据我的理解，React Styleguidist将记录单个自包含组件。因此，如果您开始更高层次地包装组件交互性，则可以更轻松地公开该组件，因为您将需要更少的道具和状态来进行仿真。

我发现Storybook可能是允许人们模拟和试验组件交互性的更好工具。它是一种不同的工具，更多的是组件构建器，并且带有旋钮和操作，为您提供简单的帮助程序，这些帮助程序可以轻松地使您从更基本的层次进行构建，然后将越来越多的组件添加在一起。最后，您最终得到了一个非常冗长的列表（和单个组件视图），这些列表与看起来和感觉上更像是一种实时样式指南（考虑自举文档）有关。

我最近给了a talk about the differences between these two tools，看一个人是否比另一个更适合您。

我发现最好使用Storybook来开发您的组件，展示交互性并获得设计者的反馈。 Styleguidist更像是一个记录完整系统以及组件如何独立和串联工作的工具。

请记住，组件和注入的属性越复杂，在其中模拟和存根这些组件就越困难。（在设计中）原子越多，并且它们越接近纯功能/渲染视觉属性，则他们将更容易记录文档，并可能在项目中重复使用或以其他方式扩展。