有什么方法可以用Semantic-UI获得动态图标？

问题描述：

我从语义的UI此图标与之反应有什么方法可以用Semantic-UI获得动态图标？

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

谢谢！

我应该补充说这段代码实际上可以工作，但是在控制台中吐出了多个错误。还有一个轻微但非常明显的滞后（可能来自错误）。 –

答

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

该解决方案还需要最后一个有效的话，那么如果输入字段包含“理念向导”，它会使用向导图标。

答

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

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

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

ALL_ICONS_IN_ALL_CONTEXTS是图标名称的数组，所以只是检查，看看如果传递的名称是数组英寸

感谢您的回复！但是，你能给我一个代码示例，看看可能的样子吗？ –

有什么方法可以用Semantic-UI获得动态图标？

相关推荐