• 新建文件
  • 使用

    对于一些可能被多处引用的功能模块，建议提炼成业务组件统一管理。这些组件一般有以下特征：

    • 只负责一块相对独立，稳定的功能；
    • 没有单独的路由配置；
    • 可能是纯静态的，也可能包含自己的 state，但不涉及 dva 的数据流，仅受父组件（通常是一个页面）传递的参数控制。

    下面以一个简单的静态组件为例进行介绍。假设你的应用中经常需要展现图片，这些图片宽度固定，有一个灰色的背景和一定的内边距，有文字介绍，就像下图这样：

    新增业务组件 - 图1

    你可以用一个组件来实现这一功能，它有默认的样式，同时可以接收父组件传递的参数进行展示。

    新建文件

    在 src/components 下新建一个以组件名命名的文件夹，注意首字母大写，命名尽量体现组件的功能，这里就叫 ImageWrapper。在此文件夹下新增 js 文件及样式文件（如果需要），命名为 index.js 和 index.less。

    在使用组件时，默认会在 index.js 中寻找 export 的对象，如果你的组件比较复杂，可以分为多个文件，最后在 index.js 中统一 export，就像这样：

    1. // MainComponent.js
    2. export default ({ ... }) => (...);
    4. // SubComponent1.js
    5. export default ({ ... }) => (...);
    7. // SubComponent2.js
    8. export default ({ ... }) => (...);
    10. // index.js
    11. import MainComponent from './MainComponent';
    12. import SubComponent1 from './SubComponent1';
    13. import SubComponent2 from './SubComponent2';
    15. MainComponent.SubComponent1 = SubComponent1;
    16. MainComponent.SubComponent2 = SubComponent2;
    17. export default MainComponent;

    你的代码大概是这个样子：

    1. // index.js
    2. import React from 'react';
    3. import styles from './index.less';    // 按照 CSS Modules 的方式引入样式文件。
    5. export default ({ src, desc, style }) => (
    6.   <div style={style} className={styles.imageWrapper}>
    7.     <img className={styles.img} src={src} alt={desc} />
    8.     {desc && <div className={styles.desc}>{desc}</div>}
    9.   </div>
    10. );
    1. // index.less
    2. .imageWrapper {
    3.   padding: 0 20px 8px;
    4.   background: #f2f4f5;
    5.   width: 400px;
    6.   margin: 0 auto;
    7.   text-align: center;
    8. }
    10. .img {
    11.   vertical-align: middle;
    12.   max-width: calc(100% - 32px);
    13.   margin: 2.4em 1em;
    14.   box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
    15. }

    到这儿组件就建好了。

    使用

    在要使用这个组件的地方，按照组件定义的 API 传入参数，直接使用就好，不过别忘了先引入：

    1. import React from 'react';
    2. import ImageWrapper from '../../components/ImageWrapper';  // 注意保证引用路径的正确
    4. export default () => (
    5.   <ImageWrapper
    6.     src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png"
    7.     desc="示意图"
    8.   />
    9. );