显示React组件的演示代码？

Question

我想为我的React组件制作一个演示页。

我想让它像http://www.material-ui.com/#/components/flat-button，它有：

1. public ObservableCollection<Session> Sessions { get; } = new ObservableCollection<Session>(); 的一些描述。我想使用props
2. 组件演示
3. 显示演示部分的代码

目前，我有一个这样的文件（markdown）

Typescript

它看起来很乱，import * as React from "react"; export default class SimpleExamples extends React.Component<{}, {}> { constructor(props: {}) { super(props); } handleChange(event: React.ChangeEvent<HTMLElement>): void { // Do something here } render() { return ( <div> <p><code>MyComponent </code> is bla bla bla with <code>value</code> prop and <code>onChange</code> prop.</p> <p> You can make it like this or like that ... etc </p> <MyComponent value={this.state.value} onChange={event => this.handleChange(event) } /> <br /> <div style={{ marginTop: 12, marginBottom: 12 }}> <CodeExample /> </div>; </div> ); } } 显示了我不想要的整个文件。

我希望它只显示这样的演示：

CodeExample

我考虑将演示拆分为单独的文件。但是，会有很多这样的。

有任何想法实现这一目标吗？提前谢谢！

Answer 1

有很多选择。如果使用nwb构建组件，即此功能here，则可以滚动自己的演示。

您可以在同一个项目中构建组件和演示，并单独部署它们并将其托管在项目上github pages

但NWB并未提供开箱即用的Markdown支持。 如果你想做一些更精细的事情你可以使用docusaurus（最近由facebook发布）甚至storybook（尽管没有降价）

<强> Docusaurus

• 由Markdown提供支持

  

节省时间并专注于项目的文档。简单地写文档   与Markdown和Docusaurus的博客文章将发布一组   静态html文件准备服务。

• 使用React构建

  

通过重用React来扩展或自定义项目的布局。 Docusaurus   可以在重用相同的页眉和页脚时进行扩展。

• 准备翻译
• 文档版本控制
• 文件搜索

就我个人而言，我已经使用了NWB和Docusaurus，我想我现在会坚持使用Docusaurus。但我认为这实际上取决于你想要对演示做什么。如果你有大量的功能特征要比我推荐的故事书，如果它主要是基于API的 NWB / Docusaurus