有没有办法用 Semantic-UI 获得动态图标？答案

【问题标题】：Is there any way to get a dynamic icon with Semantic-UI?有没有办法用 Semantic-UI 获得动态图标？
【发布时间】：2017-08-17 03:52:45
【问题描述】：

我有这个来自 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 库中的图标匹配的单词时，它会切换到那个？当他们删除那个词时，它应该回到奖杯图标。

谢谢！

【问题讨论】：

我应该补充一点，这段代码确实有效，但在控制台中吐出了多个错误。还有一个轻微但非常明显的滞后（可能来自错误）。

标签： javascript reactjs icons semantic-ui semantic-ui-react

【解决方案1】：

错误是由于propTypes 的测试引起的。它不应该在生产中发生，因为 React 会在那里自动禁用它，但它会出现在开发中以警告您传递错误的属性。

如果您想确保输入是有效的道具，解决方法是检查 words 以确保它存在于语义 UI 提供的图标中。

您可以通过如下方式导入图标列表： import {ALL_ICONS_IN_ALL_CONTEXTS} from 'semantic-ui-react/src/lib/SUI';

ALL_ICONS_IN_ALL_CONTEXTS 是一个图标名称数组，因此只需检查传递的名称是否在该数组中。

【讨论】：

感谢您的回复！但是你能给我一个代码示例吗？

【解决方案2】：

这可能不是最好的方法，但这就是我所做的。首先，我为每个想要动态的图标添加了一个 ID。

<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';

这个解决方案也是取最后一个有效单词，所以如果输入字段包含“idea wizard”，它将使用向导图标。

【讨论】：