Как добавить значок к опциям вact-select? - PullRequest
Новая
       8

Как добавить значок к опциям вact-select?

1 голос
/ 18 октября 2019

Пытается добавить значок к опции в реакции выбора. Я импортировал иконки SVG из файлов england.svg, germany.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'));

1 Ответ

0 голосов
/ 18 октября 2019

Думаю, проблема в том, что вы на самом деле не импортируете SVG. Если вы попытаетесь использовать <IconFlagGermany/> непосредственно в своем коде в любом месте, это приведет к аварийному завершению с этим сообщением:

Тип элемента недопустим: ожидается строка (для встроенных компонентов) или класс /функция (для составных компонентов), но получила: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена.

В настоящее время он не дает сбоя, потому что я думаю, что ваша функция customSingleValue не работаеткак вы и собираетесь (не рассматривали его, но уверены, что он содержит ошибки).

Если вы хотите иметь возможность импортировать SVG таким образом, вам необходимо установить соответствующий загрузчик в Webpack (иливаш выбранный упаковщик). Может быть, что-то вроде этого: https://www.npmjs.com/package/react-svg-loader

Однако другое решение - правильно экспортировать SVG-файлы как компоненты, как в этой демонстрации, разветвленной из вашего кода: https://stackblitz.com/edit/react-5gvytm

...