文档 - 开发指南 about element-react

[e1emeb0t]

以Alert为例,

• 参照element-ui的样式和方法, http://element.eleme.io/#/component/alert
• 找到el-alert的源代码, https://github.com/ElemeFE/element/tree/master/packages/alert/src
• 在项目的src目录下创建alert目录, 同时创建入口文件index.js.
• 注册组件Alert, 编辑src/index.js,

export { default as Alert } from './alert'; // 注册Alert组件

• 初始化src/alert/index.js, 参照element-ui下的packages/alert/src/main.vue,

import React, { PropTypes } from 'react';
import { Component, View } from '../../libs';

export default class Alert extends Component {
  render() {
    // el-alert的<template />
  }
}

Alert.propTypes = {
  // el-alert的props.type
}

Alert.defaultProps = {
  // el-alert的props.default
};

• 在项目的demo/pages目录下创建alert目录, 同时创建index.js, 或者style.scss.

import './style.scss';

import React from 'react';
import { Alert } from '../../../src';

export default class Playground extends React.Component {
  render() {
    return (
      <div>
        <section className="demo-section">
          <div className="demo-header">
            <h2>Alert 警告</h2>
            <p>用于页面中展示重要的提示信息。</p>
            <h3>基本用法</h3>
            <p>页面中的非浮层元素，不会自动消失。</p>
          </div>
          <div className="demo-content demo-alert">
            <Alert title="成功提示的文案" type="success" />
            <Alert title="消息提示的文案" type="info" />
            <Alert title="警告提示的文案" type="warning" />
            <Alert title="错误提示的文案" type="error" />
          </div>
        </section>
      </div>
    )
  }
}

.demo-alert  {
  .el-alert {
    margin-bottom: 20px;
  }
}

• 编辑demo/pages/index.js, 注册Alert, 设置Demo的默认页.

import Alert from './alert';

// pages是有序的Object, 会影响到左侧的菜单顺序.
const pages = {
  alert: { title: 'Alert 警告', component: Alert },
};

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      page: 'alert' // Demo的默认页面
    };
  }
}