显示 React 组件的演示代码？答案

【问题标题】：Show demo code for React component?显示 React 组件的演示代码？
【发布时间】：2018-01-09 09:32:59
【问题描述】：

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

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

props 的一些描述。我想使用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 显示了我不想要的整个文件。

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

<MyComponent value={this.state.value} onChange={event => this.handleChange(event) } />

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

有什么想法可以实现吗？提前致谢！

【问题讨论】：

标签： reactjs typescript markdown demo

【解决方案1】：

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

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

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

独角兽

由 Markdown 提供支持

节省时间并专注于项目文档。只需编写文档并且带有 Markdown 和 Docusaurus 的博客文章将发布一组准备好提供静态 html 文件。

使用 React 构建

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

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

我个人使用过 NWB 和 Docusaurus，我想我现在会坚持使用 Docusaurus。但我认为这真的取决于你想用演示做什么。如果您有大量的功能要展示，我会推荐 storybook，如果它主要是基于 API 的 NWB/Docusaurus

【讨论】：