1. 程式人生 > >dev官方教程------------------------------------FAQ(官方給出的Ant Design的常問的問題)

dev官方教程------------------------------------FAQ(官方給出的Ant Design的常問的問題)

FAQ

你們會提供 Vue 版本的 Ant Design 嗎?#

你們會提供 Sass/Stylus 等格式的樣式檔案嗎?#

不。事實上你可以使用工具(請自行 Google)將 Less 轉換成 Sass/Stylus 等。

當我點選 Select Dropdown DatePicker TimePicker Popover Popconfirm 內的另一個 popup 元件時它會消失,如何解決?#

使用 <Select getPopupContainer={trigger => trigger.parentNode}> 來在 Popover 中渲染元件,或者使用其他的 getXxxxContainer 引數。

相關 issue:#3487 #3438

Select Dropdown DatePicker TimePicker Popover Popconfirm 會跟隨滾動條上下移動?#

使用 <Select getPopupContainer={trigger => trigger.parentNode}> 來將元件渲染到滾動區域內,或者使用其他的 getXxxxContainer 引數。

相關 issue:#3487 #3438

如何修改 Ant Design 的預設主題?#

你們會提供其他主題嗎?#

如何修改 Ant Design 元件的預設樣式?
#

你可以覆蓋它們的樣式,但是我們不推薦這麼做。antd 是一系列 React 元件,但同樣是一套設計規範。

我只想使用 Menu/Button 等,但似乎我必須 import 整個 antd 和它的樣式檔案。#

import Menu from 'antd/lib/menu';
import 'antd/lib/button/style/css';

或者(ES6 支援的 tree shaking 方式):

import { Menu, Breadcrumb, Icon } from 'antd';

如何配置 webpack 以優化 momentjs 的打包大小?#

當我動態改變 defaultValue
 的時候它並沒有生效。#

Input/Select 等的 defaultXxxx(例如 defaultValue)只有在第一次渲染的時候有效,這是 React 的規範,請閱讀 React 的文件

當我設定了 Input/Select 等的 value 時它就無法修改了。#

嘗試使用 defaultValue 或 onChange 來改變 value,請參考 React 的文件

antd 覆蓋了我的全域性樣式!#

我沒法安裝 antd 和 antd 的依賴,順便提一句,我在中國大陸。#

那啥,試試 cnpm

我在 package.json 裡將 dependencies.antd 新增到了 git repository 中,但是沒有用。#

當然沒用了,請使用 npm 安裝 antd

message 和 notification 是小寫的,但是其他的元件都是首字母大寫的,這是手滑嗎?#

不,因為 message 是一個函式,而不是一個 React 元件。

antd 在移動端體驗不佳。#

請瀏覽 And Design Mobile 以瞭解詳情,antd 並非針對移動端設計。你可以試試 react-component,其中帶有 'm-' 'rn-' 字首的庫是為移動端設計的。

antd 會像 React 那樣提供單檔案引入嗎?#

是的,你可以用 script 標籤引入。但是我們推薦使用 npm 來引入 antd,這樣維護起來更簡單方便。

在我的網路環境下沒法獲取到 icon 檔案。#

你應該自行部署 iconfont 檔案到你的網路上,參考這個例子。 #1070

在 3.9.x 版本後,我們會使用 svg 圖示,你就不用擔心本地部署 iconfont 的問題了!

如何拓展 antd 的元件?#

如果你需要一些 antd 沒有包含的功能,你可以嘗試通過 HOC 拓展 antd 的元件。 更多

如何正確的拼寫 Ant Design?#

  • ✅ Ant Design:用空格分隔的首字母大寫單詞,指代設計語言

  • ✅ antd:全小寫,指代 React UI 元件庫

下面是一些典型的錯誤例子:

  • ❌ AntD

  • ❌ antD

  • ❌ Antd

  • ❌ ant design

  • ❌ AntDesign

  • ❌ antdesign

  • ❌ Antdesign

你們有接受捐助的渠道嗎,比如支付寶或者微信支付?#

還沒有。

為什麼?#

馬爸爸會付給我們錢。

錯誤和警告#

這裡是一些你在使用 antd 的過程中可能會遇到的錯誤和警告,但是其中一些並不是 antd 的 bug。

Adjacent JSX elements must be wrapped in an enclosing tag#

React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)#

請確保你正確引入了 antd 的元件。參考 antd 相應元件的文件,注意你程式碼中的 typo。

rm is not recognized as an internal or external command#

請閱讀這個 issue,或者試試 Linux/Unix。

Failed propType: Invalid prop AAA of type BBB supplied to CCC, expected DDD. Check the render method of EEE.#

請閱讀你正在使用版本的 antd 的文件,確保你傳遞給 antd 元件的引數型別正確。

Unknown option: xxx/package.json.presets#

Invariant Violation: findComponentRoot(...): Unable to find element.#

你或許引入了 React 兩次。如果你使用 webpack,請將 React & ReactDOM 設定為 external,參見:#525。如果你使用其他工具(browserify 等),請閱讀它們的文件並將 React & ReactDOM 設定為 external。