有什么办法可以用Semantic-UI得到一个动态图标吗？

Question

我有来自 Semantic-UI 和 React

的这个图标

<Icon name={`idea ${words}`} /> 其中 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 库中的图标匹配的单词时，它会切换到那个图标？当他们删除那个词时，它应该回到奖杯图标。

谢谢！

Answer 1

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

如果你想确保输入是一个有效的道具，一个解决方法是检查 words 以确保它存在于提供的图标中，通过语义-ui。

您可以像这样导入图标列表： import {ALL_ICONS_IN_ALL_CONTEXTS} from 'semantic-ui-react/src/lib/SUI';

ALL_ICONS_IN_ALL_CONTEXTS 是一个图标名称数组，所以只需检查传递的名称是否在该数组中即可。

Answer 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"，它将使用向导图标。

有什么办法可以用Semantic-UI得到一个动态图标吗？

Is there any way to get a dynamic icon with Semantic-UI?

javascript

icons

reactjs

semantic-ui

semantic-ui-react