Есть ли способ получить динамическую иконку с помощью Semantic-UI?

У меня есть этот значок из Semantic-UI с React

<Icon name={`idea ${words}`} /> где слова могут быть любой строкой слов на основе пользовательского ввода. Есть ли способ заставить это не выдавать ошибку? Я получаю такие ошибки прямо сейчас

Warning: Failed prop type: Invalid prop `name` of value `user github` supplied 
to `Icon`.

Instead of `user github`, did you mean:
  - user
  - users
  - github

где похоже, что ему нужно только одно слово, но я хочу, чтобы он мог принимать несколько.

Есть ли способ, когда значок загружается для отображения значка трофея, но когда люди вводят слово, которое соответствует значку в библиотеке Semantic-UI, он переключается на этот? И когда они удалят это слово (слова), оно должно вернуться к значку трофея.

Спасибо!


reactjs javascript icons semantic-ui-react semantic-ui
person Tyler Chong    schedule 17.08.2017    source источник
comment
Я должен добавить, что этот код действительно работает, но выдает несколько ошибок в консоли. Также есть небольшой, но очень заметный лаг (вероятно из-за ошибки).   -  person Tyler Chong    schedule 17.08.2017

Ответы (2)


arrow_upward
3
arrow_downward

Ошибка связана с тестом propTypes. Этого не должно происходить в продакшене, так как React отключает его там автоматически, но появляется в процессе разработки, чтобы предупредить вас о передаче неправильного реквизита.

Если вы хотите убедиться, что ввод является допустимым реквизитом, обходным путем является проверка words, чтобы убедиться, что он существует в предоставленных значках с помощью semantic-ui.

Вы можете получить список иконок, импортировав его следующим образом: import {ALL_ICONS_IN_ALL_CONTEXTS} from 'semantic-ui-react/src/lib/SUI';

ALL_ICONS_IN_ALL_CONTEXTS — это массив имен значков, так что просто проверьте, находится ли переданное имя в этом массиве.

person kaveh    schedule 17.08.2017
comment
Спасибо за ответ! Но не могли бы вы привести пример кода, как это может выглядеть? - person Tyler Chong; 20.08.2017

arrow_upward
1
arrow_downward

Возможно, это был не лучший способ сделать это, но я сделал именно так. Сначала я добавил идентификатор к каждой иконке, которую хотел сделать динамичной.

<Icon ... id={`...-${index}`} color="teal" name={`${DEFAULT_ICON}`} />

затем я подписал поле ввода на событие onChange и сделал это.

const val = e.target.value; (Value of the Input Field)
let icon = `${DEFAULT_ICON}`; (Whatever you want the fallback icon to be
let words = val.split(' ');

for (let i = 0; i < words.length; i++) {
  let word = words[i];
  if (ALL_ICONS_IN_ALL_CONTEXTS.indexOf(word.toLowerCase()) > -1) {
    icon = word;
  }
}
$(`#...-${index}`)[0].className = `teal icon ${icon}`;

Имейте в виду, что для этого решения требуются эти два импорта.

import { ALL_ICONS_IN_ALL_CONTEXTS } from 'semantic-ui-react/dist/commonjs/lib/SUI';
import $ from 'jquery';

Это решение также принимает последнее допустимое слово, поэтому, если поле ввода содержит «мастер идей», будет использоваться значок мастера.

person Tyler Chong    schedule 21.08.2017