Wie Sie einen Klassennamen bedingt hinzufügen?

Question

Ich habe im Anschluss an den mit reagieren-redux-Form:

<fieldset> 
    <label>{label}</label> 
    <div> 
    <input {...input} name="email" type="text" className="form-control" /> 
    {touched && error && <span className="error">{error}</span>} 
    </div> 
</fieldset> 

Ich möchte in der Lage sein, zu aktualisieren <fieldset> mit entweder

className="" 
className="has-success" 
className="has-danger" 

Die Logik sei:

• Wenn touched aber keine error: <fieldset className="has-success">
• Wenn touched und error: <fieldset className="has-danger">
• Wenn nicht touched noch error: <fieldset className="">

Wie kann ich diese bekommen arbeiten in Reaktion?

Answer 1

Man könnte es implementieren etwa so:

<fieldset className={touched ? (error ? "has-danger" : "has-success") : ""}> 
    ... 
</fieldset> 

Diese prüft zunächst, ob touched truthy ist. Wenn es ist, nur dann wird es eine <fieldset> rendern, welche Klasse "has-danger" ist, wenn error truthy oder "has-success" andernfalls ist. Wenn touched, nicht existiert, dann ist die Klasse eine leere Zeichenfolge. Dies setzt voraus, dass es keinen Fall gibt, in dem touched falsch ist und error truthy ist (obwohl Sie mehr hinzufügen könnten, um diesen Fall zu behandeln).

Wenn Sie feststellen, dass dies ein wenig unleserlich ist, versuchen Sie vielleicht das classnames NPM-Paket verwendet, die ein bisschen mehr lesbar ist:

<fieldset className={classNames({ 
    "": !touched && !error, 
    "has-danger": touched && error, 
    "has-success": touched && !error 
})}> 
    ... 
</fieldset> 

Dies ist besser lesbar und nicht davon ausgehen, es wird nicht sein ein Fall, in dem touched falsch ist und error truthy ist.