Ant Design Pro 学习三 新建组件

Posted 2020-10-19 学-无-止-境

在 src/components 下新建一个以组件名命名的文件夹，注意首字母大写

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

// MainComponent.js
export default ({ ... }) => (...);

// SubComponent1.js
export default ({ ... }) => (...);

// SubComponent2.js
export default ({ ... }) => (...);

// index.js
import MainComponent from \'./MainComponent\';
import SubComponent1 from \'./SubComponent1\';
import SubComponent2 from \'./SubComponent2\';

MainComponent.SubComponent1 = SubComponent1;
MainComponent.SubComponent2 = SubComponent2;
export default MainComponent;

index.js

// index.js
import React from \'react\';
import styles from \'./index.less\';    // 按照 CSS Modules 的方式引入样式文件。

export default ({ src, desc, style }) => (
  <div style={style} className={styles.imageWrapper}>
    <img className={styles.img} src={src} alt={desc} />
    {desc && <div className={styles.desc}>{desc}</div>}
  </div>
);

index.less

// index.less
.imageWrapper {
  padding: 0 20px 8px;
  background: #f2f4f5;
  width: 400px;
  margin: 0 auto;
  text-align: center;
}

.img {
  vertical-align: middle;
  max-width: calc(100% - 32px);
  margin: 2.4em 1em;
  box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
}

使用：可以传递参数

访问 （成功）