dumi——为React组件配上好看的文档

1，定位

React组件开发的文档脚手架。

编写好一个组件，稍加配置，即可拥有好看的文档。

2，搭建dumi项目

官方文档：https://d.umijs.org/zh-CN/guide

初始化一个dumi项目，启动它：

npx @umijs/create-dumi-lib

npm i

npx dumi dev

效果：

好看。

3，组件结构

入口，src下，注册所有组件。

export {
    
     default as Foo } from './Foo';

组件。用文件夹区分。

md作为文档结构。

tsx代表一个组件。这一块会显示成一个组件的效果和源码。

4，举例：开关按钮

新建一个文件夹，Radio

新建index.tsx

import React from "react";
import "./index.css"
export default (props: {
    
     data: boolean, toggle: () => void }) =>
	(
		<label className="checkbox">
			<input type="checkbox" checked={
    
    props.data} onChange={
    
    e => props.toggle()}/>
		</label>
	)

新建index.css

.checkbox {
    
    
	display: inline-block;
	width: 100px;
	height: 50px;
	border-radius: 25px;
	position: relative;
	overflow: hidden;
}
.checkbox > input {
    
    
	visibility: hidden;
}
.checkbox > input::after, .checkbox > input::before {
    
    
	position: absolute;
	visibility: visible;
	content: "";
}
.checkbox > input::after {
    
    
	width: 40px;
	height: 40px;
	left: 5px;
	top: 5px;
	background-color: white;
	border-radius: 50%;
	transition: all 0.2s;
}
.checkbox > input::before {
    
    
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: lightgray;
	transition: all 0.2s;
}
.checkbox > input:checked::after {
    
    
	transform: translateX(50px);
}
.checkbox > input:checked::before {
    
    
	background-color: pink;
}

新建index.md，内部包含tsx代码块。

import React from 'react';
import {
    
    Component} from "react";
import {
    
     Radio } from 'untitled';
export default class extends Component {
    
    
	state = {
    
    
		v1: false,
		v2: true,
		v3: false,
		v4: true
	}
	render() {
    
    
		return (
			<div>
				<Radio data={
    
    this.state.v1} toggle={
    
    e => this.setState({
    
    v1: !this.state.v1})}/>
				<Radio data={
    
    this.state.v2} toggle={
    
    e => this.setState({
    
    v2: !this.state.v2})}/>
				<Radio data={
    
    this.state.v3} toggle={
    
    e => this.setState({
    
    v3: !this.state.v3})}/>
				<Radio data={
    
    this.state.v4} toggle={
    
    e => this.setState({
    
    v4: !this.state.v4})}/>
			</div>
		);
	}
}

效果：

舒适。