github.com/UCloud-FE/react-components @v1.18.4

React Components

前排注意事项

• 一些没有写在文档中的 props 以及方法等强烈不建议使用，因为这类 API 可能会随时变动。版本更新后可能会发生不可预知的问题。

浏览器兼容

|

IE / Edge |

Firefox |

Chrome |

Safari | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | IE11, Edge 18 | 29 | 30 | 7 |

如何使用

• 组件依赖于 react（^16）、react-dom（^16），请注意引入对应依赖，从 0.7.0 开始，不再兼容 react 15。

• 使用 npm 或 yarn 进行安装

yarn add @ucloud-fe/react-components

npm install @ucloud-fe/react-components

yarn add @ucloud-fe/react-components@0.3.1

• 需要注意对应修改 webpack 的 loader 配置，根据项目具体配置

js static { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /.(svg|eot|ttf|woff)$/, use: [ { loader: 'file-loader', options: { name: 'assets/[name].[ext]' } } ] } ]; }

• 实现模块化加载

  • 通过babel-plugin-import实现模块化加载

  添加 import 插件

  bash npm install babel-plugin-import --dev

  在 babel 的 plugins 中添加配置

  json { "plugins": [ [ "import", { "libraryName": "@ucloud-fe/react-components", "camel2DashComponentName": false, "libraryDirectory": "lib/components" } ] ] }

  • 或者直接手动引用对应文件来实现模块化加载

  js static import Button from '@ucloud-fe/react-components/lib/components/Button';

如何在 Create-React-App 中使用

添加到依赖

1. 通过 Create-React-App 创建好项目
2. 按照上述文档将 react-components 添加到依赖，然后按照需要去引用

模块化支持

1. 修改项目的自定义配置，不支持的需要先执行 npm run eject。
2. 按照上述文档在 babel 的 plugin 中添加配置

zIndex 说明

• Modal、Drawer 默认的 zIndex 为 1010
• Popover 默认的 zIndex 为 1030
• Tooltip、Select、DatePicker、TimePicker、ActionList、PopConfirm 等 zIndex 同为 1030，弹出层容器、层级、滚动定位可通过 ConfigProvider 统一配置
• Message 默认的 zIndex 为 1060
• Loading 默认的 zIndex 为 10
• 其余内部使用的 zIndex 为 10 以下