2

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

谢谢！

4

2 回答 2

3

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

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

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

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

于 2017-08-17T04:37:18.510 回答
1

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

此解决方案还采用最后一个有效单词，因此如果输入字段包含“想法向导”，它将使用向导图标。

于 2017-08-21T10:05:05.500 回答