有什麼方法可以用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庫中的圖標匹配的單詞時，它會切換到該圖標嗎？當他們刪除那個單詞時，它應該回到獎盃圖標上。

謝謝！

來源

2017-08-17 Tyler Chong

我應該補充說這段代碼實際上可以工作，但是在控制檯中吐出了多個錯誤。還有一個輕微但非常明顯的滯後（可能來自錯誤）。 –

這可能不是最好的辦法，但這是我做的。首先，我爲每個想要變爲動態的圖標添加了一個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-21 10:05:05

該錯誤是由於propTypes的測試造成的。它不應該在生產中發生，因爲React會自動禁用它，但它會在開發中顯示，以警告您傳遞錯誤的道具。

如果您想確保輸入是有效的道具，解決方法是檢查words以確保它在semantic-ui提供的圖標中存在。

您可以通過導入像這樣得到的圖標的列表： import {ALL_ICONS_IN_ALL_CONTEXTS} from 'semantic-ui-react/src/lib/SUI';

ALL_ICONS_IN_ALL_CONTEXTS是圖標名稱的數組，所以只是檢查，看看如果傳遞的名稱是數組英寸

來源

2017-08-17 04:37:18 kaveh

感謝您的回覆！但是，你能給我一個代碼示例，看看可能的樣子嗎？ –

有什麼方法可以用Semantic-UI獲得動態圖標？

回答

相關問題