[英]How to add an icon to the options in react-select?
尝试在 react-select 中向选项添加图标。 我从文件england.svg
, germany.svg
中导入了 svg 图标。 我创建了customSingleValue
并将其放入
<Select components={{ SingleValue: customSingleValue }} />
显示标签,但不显示图标。
此处演示: https://stackblitz.com/edit/react-q19sor
import Select from 'react-select'
import { ReactComponent as IconFlagEngland } from "./england.svg";
import { ReactComponent as IconFlagGermany } from "./germany.svg";
const options = [
{ value: 'England', label: 'England', icon: <IconFlagEngland/> },
{ value: 'Germany', label: 'Germany', icon: <IconFlagGermany/> }
]
const customSingleValue = ({ options }) => (
<div className="input-select">
<div className="input-select__single-value">
{ options.icon && <span className="input-select__icon">{ options.icon }</span> }
<span>{ options.label }</span>
</div>
</div>
);
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
render() {
return (
<Select
defaultValue={ options [0] }
options={ options }
/*styles={ selectCustomStyles }*/
/*onChange={ changeSelectHandler }*/
components={ {SingleValue: customSingleValue } }
/>
);
}
}
render(<App />, document.getElementById('root'));
我找到了解决方法。 我的技术类似于@canda :
import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
import Select, { components } from "react-select";
const options = [
{ value: "England", label: "England", icon: "england.svg" },
{ value: "Germany", label: "Germany", icon: "germany.svg" }
];
const { Option } = components;
const IconOption = props => (
<Option {...props}>
<img
src={require('./' + props.data.icon)}
style={{ width: 36 }}
alt={props.data.label}
/>
{props.data.label}
</Option>
);
class App extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
return (
<Select
defaultValue={options[0]}
options={options}
components={{ Option: IconOption }}
/>
);
}
}
render(<App />, document.getElementById("root"));
我认为问题在于您实际上并没有导入 SVG。 如果您尝试在任何地方直接在代码中使用<IconFlagGermany/>
,它将因以下消息而严重崩溃:
元素类型无效:应为字符串(用于内置组件)或类/函数(用于复合组件)但得到:未定义。 您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。
它目前没有崩溃,因为我认为您的customSingleValue
function 没有按照您的预期工作(没有调查过,但很确定它有问题)。
如果您希望能够以这种方式导入 SVG,则需要在 Webpack(或您选择的捆绑程序)中设置适当的加载程序。 也许是这样的: https://www.npmjs.com/package/react-svg-loader
但是,另一种解决方案是将您的 SVG 正确导出为组件,例如从您的代码分叉的这个演示: https://stackblitz.com/edit/react-5gvytm
万一有人想在react-select
中使用多选图标,可以使用以下代码:
const { MultiValue } = components;
const MultiValueOption = (props) => {
return (
<MultiValue {...props}>
<img
src={require("./" + props.data.icon)}
style={{ width: 36 }}
alt={props.data.label}
/>
<span>{props.data.value}</span>
</MultiValue>
);
};
<Select
options={options}
components={{
Option: IconOption,
MultiValue: MultiValueOption,
}}
isMulti={true}
></Select>;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.