--- order: 3 title: zh-CN: 头像 en-US: Icon Image --- ## zh-CN 自定义建议(含头像) 注意,自定义建议时,onSearchChange 必须不能为空。 ## en-US Customize suggestions. ```jsx import { Mention, Avatar } from 'antd'; const Nav = Mention.Nav; const webFrameworks = [ { name: 'React', type: 'JavaScript', icon: 'https://zos.alipayobjects.com/rmsportal/LFIeMPzdLcLnEUe.svg', }, { name: 'Angular', type: 'JavaScript', icon: 'https://zos.alipayobjects.com/rmsportal/PJTbxSvzYWjDZnJ.png', }, { name: 'Dva', type: 'Javascript', icon: 'https://zos.alipayobjects.com/rmsportal/EYPwSeEJKxDtVxI.png', }, { name: 'Flask', type: 'Python', icon: 'https://zos.alipayobjects.com/rmsportal/xaypBUijfnpAlXE.png', }, ]; class CustomNavMention extends React.Component { state = { suggestions: [], }; onSearchChange = value => { const searchValue = value.toLowerCase(); const filtered = webFrameworks.filter( item => item.name.toLowerCase().indexOf(searchValue) !== -1, ); const suggestions = filtered.map(suggestion => ( )); this.setState({ suggestions }); }; render() { const { suggestions } = this.state; return ( ); } } ReactDOM.render(, mountNode); ```