javascript - 自定义 Antd AutoComplete 以将 {children} 用于 dataSource 和 input

Question

{children}使用方法时我可以自定义 1) 数据源和 2) 输入吗？

文档说：

children（用于自定义输入元素）
自定义输入元素
HTMLInputElement / HTMLTextAreaElement / React.ReactElement

children (for dataSource)自动完成 React.ReactElement / Array
的数据源

我使用其中一种但不能同时使用它。真的很烦人，没有renderOption属性或类似的东西......

标签： javascriptreactjsantd

Answer 1

如果你想同时使用两者，你​​可以这样写：

const results = dataSource.map(x => (
  <Select.Option key={x} {/* props you want */}>{x}</Option>
))

<AutoComplete dataSource={results}>
  <Search placeholder="Search..." />
</AutoComplete>