My options structure is like below
我的期权结构如下
const options = 'option1', 'option2'];
I want to render option with icon like this:
我想使用如下图标来渲染选项:
My current code for renderOption is :
我目前的renderOption代码是:
renderOption = (options => {
return (
<Fragment>
<SearchIcon>
<img src = {searchIcon.svg}/>
</SearchIcon>
{options}
</Fragment>
)
})
But I got error:
但我弄错了:
Can anyone help me render options that don't have labels with icon?
有没有人可以帮我渲染没有图标标签的选项?
Thank you!
谢谢!
更多回答
Normally that icon indicates, where the user would have to click to start the search. Why do you want to use that icon for every option?
通常,该图标指示用户必须单击才能开始搜索的位置。为什么每个选项都要使用该图标?
优秀答案推荐
I cannot see your code in order to help you fix your issue according to your need, but you are close to where you needed to be, which is to utilize the renderOption
props for <Autocomplete>
component.
我看不到您的代码是为了帮助您根据需要修复问题,但您已经接近了所需的位置,即使用
组件的renderOption道具。
In this case, what you want to do is actually this
在这种情况下,您要做的实际上是
<Autocomplete
renderOption={(props, option) => (
<li {...props}>
<SearchIcon />
{option.label}
</li>
)}
// ... and rest of the props
/>
See doc for renderOption
API for Autocomplete
here https://mui.com/material-ui/api/autocomplete/#Autocomplete-prop-renderOption
有关自动完成的renderOption API,请参阅此处https://mui.com/material-ui/api/autocomplete/#Autocomplete-prop-renderOption的文档
CodeSandbox demo: https://codesandbox.io/s/clever-goldberg-kqq5pq?file=/Demo.tsx
CodeSandbox演示:https://codesandbox.io/s/clever-goldberg-kqq5pq?文件=/Demo.tsx
更多回答
Thanks for your help! But my options structure is [option1, option2], it doesn't have a label. Then what should I put in "{option.label}" ?
谢谢你的帮忙!但我的期权结构是[option1,option2],它没有标签。那我应该在“{option.bel}”里填什么呢?
In that case, just option
will suffice, because MUI automatically knows what is passed in for the autocomplete. I have updated the CodeSandbox demo that matches more to your scenario so you can refer to :)
在这种情况下,只要选项就足够了,因为MUI自动知道为自动完成传入了什么。我已经更新了与您的场景更匹配的CodeSandbox演示,因此您可以参考:)
我是一名优秀的程序员,十分优秀!