Question

我有来自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

看起来它只需要一个单词，但我希望它能够使用多个单词。

有没有办法让Icon加载显示奖杯图标，但是当人们输入一个与Semantic-UI库中的Icon匹配的单词时，它会切换到那个？当他们删除那个词时，它应该回到奖杯图标。

谢谢！

Answer 1

错误是由propTypes的测试引起的。它不应该在生产中发生，因为React会自动在那里禁用它，但它会在开发中显示，以警告你传递错误的道具。

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

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

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

Answer 2

这可能不是最好的方法，但这就是我所做的。首先，我为每个想要动态的Icon添加了一个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获得动态图标？

2 个答案: