代码之家 › 专栏 › 技术社区 › Tyler Chong

有没有办法通过语义用户界面获得动态图标?

semantic-ui-react semantic-ui icons reactjs javascript

2

Tyler Chong · 技术社区 · 8 年前

<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

它看起来只需要一个单词,但我希望它能够接受多个单词。

当图标加载时,有没有办法显示奖杯图标,但当人们在语义UI的库中输入与图标匹配的单词时,它会切换到该单词?当他们删除这个词时,它应该回到奖杯图标。

谢谢

2 回复 | 直到 8 年前

1

3

kaveh 8 年前

错误是由测试引起的 propTypes

如果你想确保输入是一个有效的道具,一个解决方法是检查 words

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

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

2

1

Tyler Chong 8 年前

这可能不是最好的方法,但我就是这么做的。首先,我给每个我想要动态的图标添加了一个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';