diff --git a/components/auto-complete/demo/options.md b/components/auto-complete/demo/options.md index 3a54312293..642e9891f6 100644 --- a/components/auto-complete/demo/options.md +++ b/components/auto-complete/demo/options.md @@ -7,12 +7,11 @@ title: ## zh-CN -Datasource 的每一项是一个 `AutoComplete.Option`。通过 `AutoComplete.Option` 自定义下拉菜单。 +也可以直接传 `AutoComplete.Option` 作为 `AutoComplete` 的 `children`,而非使用 `dataSource`。 ## en-US -Items in dataSource could be an `AutoComplete.Option`. - +You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `dataSource`。 ````jsx import { AutoComplete } from 'antd'; @@ -36,15 +35,16 @@ const Complete = React.createClass({ }, render() { const { result } = this.state; - const dataSource = result.map((email) => { + const children = result.map((email) => { return ; }); return ( + > + {children} + ); }, }); diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx index e37a628305..a2bada7958 100644 --- a/components/auto-complete/index.tsx +++ b/components/auto-complete/index.tsx @@ -7,11 +7,14 @@ export interface SelectedValue { label: React.ReactNode; } +export interface DataSourceItemObject { value: string; text: string; }; +export type DataSourceItemType = string | DataSourceItemObject; + export interface AutoCompleteProps { size?: 'large' | 'small' | 'default'; className?: string; notFoundContent?: Element; - dataSource: Array; + dataSource: DataSourceItemType[]; prefixCls?: string; transitionName?: string; optionLabelProp?: string; @@ -42,7 +45,7 @@ export default class AutoComplete extends React.Component { + const options = children || (dataSource ? dataSource.map((item, index) => { switch (typeof item) { case 'string': return ; case 'object': - if (React.isValidElement(item)) { - return React.cloneElement(item, { - key: item.key || index, - }); - } - return ; + return ( + + ); default: - return []; + throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.'); } - }) : []; + }) : []); return (