react-styleguidist 中的动态示例
Dynamic examples in react-styleguidist
所有。
我刚开始使用 react-styleguidist 并且非常喜欢它的易用性。但是，我想在文档中添加动态示例。即文档查看者可以通过按钮、事件和其他异步交互更改道具来与之交互的示例。
现在我似乎只能在 markdown 中生成这样的文档示例
js
<MyComponent propOne="something static" />
有没有办法解决这个问题，我希望能够同时记录和开发，而不必同时使用 react-storybook。
谢谢，
来自 Styleguidist 文档的回答：
Each example has its own state that you can access as state variable and change with setState() function. Default state is {} and can be set with initialState.
这取决于您的意图，但您当然可以开始模拟您需要的所有部分以获得更多交互性。据我了解，React Styleguidist 用于记录单个自包含组件。因此，如果您开始在更高级别包装组件交互性，则可以更轻松地公开该组件，因为您需要模拟的道具和状态会更少。
我发现 Storybook 可能是一个更好的工具，可以让人们模拟和试验组件的交互性。它是一个不同的工具，更像是一个组件构建器，并带有旋钮和操作，可以为您提供简单的助手，让您可以轻松地从更原子的级别构建，然后将越来越多的组件添加在一起。最后你会得到一个非常冗长的列表（和单一组件视图），而不是看起来和感觉更像一个活生生的风格指南的东西（想想 bootstrap 文档）。
我最近给了 a talk about the differences between these two tools 这可能是一个很好的参考，看看哪个更适合您的需求。
我发现最好使用 Storybook 来开发您的组件、公开交互性并获得设计师的反馈。 Styleguidist 更像是一个记录完整系统以及组件如何独立和串联工作的工具。
请记住，注入的组件和属性越复杂，模拟和存根这些组件就越困难。它们越原子化（在设计中）并且越接近纯功能/渲染视觉属性，它们越容易记录并可能在项目中重用或以其他方式扩展。
所有。
我刚开始使用 react-styleguidist 并且非常喜欢它的易用性。但是，我想在文档中添加动态示例。即文档查看者可以通过按钮、事件和其他异步交互更改道具来与之交互的示例。
现在我似乎只能在 markdown 中生成这样的文档示例
js
<MyComponent propOne="something static" />
有没有办法解决这个问题，我希望能够同时记录和开发，而不必同时使用 react-storybook。
谢谢，
来自 Styleguidist 文档的回答：
Each example has its own state that you can access as state variable and change with setState() function. Default state is {} and can be set with initialState.
这取决于您的意图，但您当然可以开始模拟您需要的所有部分以获得更多交互性。据我了解，React Styleguidist 用于记录单个自包含组件。因此，如果您开始在更高级别包装组件交互性，则可以更轻松地公开该组件，因为您需要模拟的道具和状态会更少。
我发现 Storybook 可能是一个更好的工具，可以让人们模拟和试验组件的交互性。它是一个不同的工具，更像是一个组件构建器，并带有旋钮和操作，可以为您提供简单的助手，让您可以轻松地从更原子的级别构建，然后将越来越多的组件添加在一起。最后你会得到一个非常冗长的列表（和单一组件视图），而不是看起来和感觉更像一个活生生的风格指南的东西（想想 bootstrap 文档）。
我最近给了 a talk about the differences between these two tools 这可能是一个很好的参考，看看哪个更适合您的需求。
我发现最好使用 Storybook 来开发您的组件、公开交互性并获得设计师的反馈。 Styleguidist 更像是一个记录完整系统以及组件如何独立和串联工作的工具。
请记住，注入的组件和属性越复杂，模拟和存根这些组件就越困难。它们越原子化（在设计中）并且越接近纯功能/渲染视觉属性，它们越容易记录并可能在项目中重用或以其他方式扩展。