Gibt es eine Möglichkeit, ein dynamisches Symbol mit Semantic-UI zu erhalten?

Question

Ich habe dieses Icon von Semantic-UI mit

Reagieren

<Icon name={`idea ${words}`} /> wo Worte jede Wortfolge basierend auf Benutzereingaben werden können. Gibt es eine Möglichkeit, dies zu vermeiden, um Fehler zu vermeiden? Ich erhalte Fehler wie diese jetzt

Warning: Failed prop type: Invalid prop `name` of value `user github` supplied 
to `Icon`. 

Instead of `user github`, did you mean: 
    - user 
    - users 
    - github 

wo es sieht aus wie es nur ein Wort will, aber ich will es in der Lage sein, mehrere zu übernehmen.

Gibt es eine Möglichkeit, wenn das Symbol geladen wird, um das Trophäensymbol anzuzeigen, aber wenn Benutzer ein Wort eingeben, das mit einem Symbol in der Bibliothek der Semantic-UI übereinstimmt, wechselt es zu diesem Symbol? Und wenn sie dieses Wort löschen, sollte es auf das Trophäen-Symbol zurückfallen.

Danke!

Answer 1

Dies könnte nicht der beste Weg gewesen sein, aber das ist, was ich getan habe. Zuerst habe ich jedem Icon eine ID hinzugefügt, die ich dynamisch sein wollte.

<Icon ... id={`...-${index}`} color="teal" name={`${DEFAULT_ICON}`} /> 

Als nächstes habe ich das Eingabefeld für ein onChange-Ereignis abonniert und dies getan.

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}`; 

Denken Sie daran, diese Lösung erfordert diese beiden Importe.

import { ALL_ICONS_IN_ALL_CONTEXTS } from 'semantic-ui-react/dist/commonjs/lib/SUI'; 
import $ from 'jquery'; 

Diese Lösung nimmt auch das letzte gültige Wort, also, wenn das Eingabefeld „Idee Assistenten“ enthält, wird es das Assistenten-Symbol verwenden.

Answer 2

Der Fehler ist auf den Test von propTypes zurückzuführen. Es sollte nicht in der Produktion passieren, da React es dort automatisch deaktiviert, aber es zeigt sich in der Entwicklung, um Sie davor zu warnen, falsche Props zu übergeben.

Wenn Sie sicherstellen möchten, dass die Eingabe eine gültige Prop ist, überprüft eine Problemumgehung words, um sicherzustellen, dass es in den bereitgestellten Symbolen von semantic-ui vorhanden ist.

Sie können eine Liste der Symbole erhalten, indem es wie folgt importieren: import {ALL_ICONS_IN_ALL_CONTEXTS} from 'semantic-ui-react/src/lib/SUI';

ALL_ICONS_IN_ALL_CONTEXTS ist ein Array von Icon-Namen, so überprüfen Sie einfach und sehen, ob der übergebene Name in diesem Array ist.