Manera correcta de manejar el estilo condicional en React

Estoy haciendo React en este momento y me preguntaba si hay una forma "correcta" de hacer un estilo condicional. En el tutorial que usan

style={{
  textDecoration: completed ? 'line-through' : 'none'
}}

Prefiero no usar estilos en línea, por lo que quiero usar una clase para controlar el estilo condicional. ¿Cómo se abordaría esto en la forma de pensar de React? ¿O debería usar esta forma de estilo en línea?

Si prefiere usar un nombre de clase, por supuesto use un nombre de clase.

className={completed ? 'text-strike' : null}

También puede encontrar útil el paquete classnames . Con él, su código se vería así:

className={classNames({ 'text-strike': completed })}

No hay una forma "correcta" de hacer un estilo condicional. Haz lo que funcione mejor para ti. En lo que a mí respecta, prefiero evitar el estilo en línea y utilizar las clases de la forma que acabamos de describir.

POSTCRIPT [06-AGO-2019]

Si bien sigue siendo cierto que React no tiene opiniones sobre el estilo, en estos días recomendaría una solución CSS-in-JS; a saber, componentes de estilo o emoción . Si eres nuevo en React, apégate a las clases CSS o estilos en línea para empezar. Pero una vez que se sienta cómodo con React, le recomiendo que adopte una de estas bibliotecas. Los uso en todos los proyectos.

 <div style={{ visibility: this.state.driverDetails.firstName != undefined? 'visible': 'hidden'}}></div>

Consulte el código anterior. Eso hará el truco.

Si necesita aplicar condicionalmente estilos en línea (aplicar todo o nada), esta notación también funciona:

style={ someCondition ? { textAlign:'center', paddingTop: '50%'} : {}}

En caso de que 'someCondition' no se cumpla, pasa un objeto vacío.

En primer lugar, estoy de acuerdo con usted por una cuestión de estilo: también (y lo hago) aplicar condicionalmente clases en lugar de estilos en línea. Pero puedes usar la misma técnica:

<div className={{completed ? "completed" : ""}}></div>

Para conjuntos de estados más complejos, acumule una matriz de clases y aplíquelas:

var classes = [];

if (completed) classes.push("completed");
if (foo) classes.push("foo");
if (someComplicatedCondition) classes.push("bar");

return <div className={{classes.join(" ")}}></div>;

en lugar de esto:

style={{
  textDecoration: completed ? 'line-through' : 'none'
}}

podría intentar lo siguiente usando cortocircuito:

style={{
  textDecoration: completed && 'line-through'
}}

https://codeburst.io/javascript-short-circuit-conditionals-bbc13ac3e9eb

bit de información clave del enlace:

El cortocircuito significa que en JavaScript, cuando estamos evaluando una expresión AND (&&), si el primer operando es falso, JavaScript cortocircuitará y ni siquiera verá el segundo operando.

Vale la pena señalar que esto devolvería falso si el primer operando es falso, por lo que podría tener que considerar cómo afectaría esto a su estilo.

Las otras soluciones podrían ser mejores prácticas, pero pensé que valdría la pena compartirlas.

Otra forma, usando estilo en línea y el operador de extensión

style={{
  ...completed ? { textDecoration: completed } : {}
}}

De esa manera, será útil en algunas situaciones en las que desee agregar varias propiedades al mismo tiempo según la condición.

Me encontré con esta pregunta mientras intentaba responder la misma pregunta. El enfoque de McCrohan con las clases array & join es sólido.

A través de mi experiencia, he estado trabajando con una gran cantidad de código ruby ​​heredado que se está convirtiendo a React y, a medida que construimos los componentes, me encuentro buscando tanto las clases CSS existentes como los estilos en línea.

fragmento de ejemplo dentro de un componente:

// if failed, progress bar is red, otherwise green 
<div
    className={`progress-bar ${failed ? failed' : ''}`}
    style={{ width: this.getPercentage() }} 
/>

Una vez más, me encuentro alcanzando el código CSS heredado, "empaquetándolo" con el componente y avanzando.

Entonces, realmente siento que está un poco en el aire en cuanto a qué es "mejor", ya que esa etiqueta variará mucho dependiendo de su proyecto.

La mejor manera de manejar el estilo es usando clases con un conjunto de propiedades css.

ejemplo:

<Component className={this.getColor()} />

getColor() {
    let class = "badge m2";
    class += this.state.count===0 ? "warning" : danger;
    return class;
}

Puedes usar algo como esto.

render () {
    var btnClass = 'btn';
    if (this.state.isPressed) btnClass += ' btn-pressed';
    else if (this.state.isHovered) btnClass += ' btn-over';
    return <button className={btnClass}>{this.props.label}</button>;
  }

O de lo contrario, puede usar el paquete NPM de nombres de clase para hacer que sea más sencillo trabajar con los props className dinámicos y condicionales (especialmente más que la manipulación de cadenas condicional).

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'