You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
---
order: 7
title: 社区精选组件
---
`antd` 是 Ant Design 设计规范的 React 实现,所以我们倾向于只提供符合该规范、且带有视觉展现的 UI 组件,也尽量不重复造轮子。我们推荐使用以下社区已有的优秀实现,与 antd 形成互补:
类型 | 推荐组件
----|--------
路由 | [react-router ](https://github.com/ReactTraining/react-router )
布局 | [react-blocks ](http://whoisandie.github.io/react-blocks/ )
拖拽 | [react-dnd ](https://github.com/gaearon/react-dnd ) [react-draggable ](https://github.com/mzabriskie/react-draggable )
代码编辑器 | [react-codemirror ](https://github.com/JedWatson/react-codemirror )
富文本编辑器 | [react-quill ](https://github.com/zenoamaro/react-quill ) [react-draft-wysiwyg ](https://github.com/jpuri/react-draft-wysiwyg ) [react-lz-editor ](https://github.com/leejaen/react-lz-editor )( Ant Design 风格)
拾色器 | [rc-color-picker ](https://github.com/react-component/color-picker ) [react-color ](http://casesandberg.github.io/react-color/ )
响应式 | [react-responsive ](https://github.com/contra/react-responsive ) [react-media ](https://github.com/ReactTraining/react-media )
复制到剪贴板 | [react-copy-to-clipboard ](https://github.com/nkbt/react-copy-to-clipboard )
页面 meta 属性 | [react-helmet ](https://github.com/nfl/react-helmet ) [react-document-title ](https://github.com/gaearon/react-document-title )
图标 | [react-fa ](https://github.com/andreypopp/react-fa ) [react-icons ](https://github.com/gorangajic/react-icons )
二维码 | [qrcode.react ](https://github.com/zpao/qrcode.react )
可视化图表 | [g2-react ](https://github.com/antvis/g2-react ) [recharts ](https://github.com/recharts/recharts/ ) [victory ](https://github.com/FormidableLabs/victory )
顶部进度条 | [nprogress ](https://github.com/rstacruz/nprogress )
应用国际化 | [react-intl ](https://github.com/yahoo/react-intl )
代码高亮 | [react-syntax-highlighter ](https://github.com/conorhastings/react-syntax-highlighter )
Markdown 渲染 | [react-markdown ](http://rexxars.github.io/react-markdown/ )
无限滚动 | [react-virtualized ](https://github.com/bvaughn/react-virtualized )
< style >
. markdown table td : first-child {
font-weight : 500 ;
width : 20 % ;
background : #fcfcfc ;
}
. markdown table td > a : not ( : last-child ) {
margin-right : 18 px ;
}
. markdown table td > a : not ( : last-child ) : after {
content : '|' ;
color : #bbb ;
margin : 0 6 px 0 8 px ;
pointer-events : none ;
position : absolute ;
}
</ style >