Maneira correta de lidar com o estilo condicional no React

Estou fazendo um React agora e queria saber se existe uma maneira "correta" de fazer estilo condicional. No tutorial, eles usam

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

Prefiro não usar estilo embutido, então quero usar uma classe para controlar o estilo condicional. Como alguém abordaria isso no modo de pensar React? Ou devo apenas usar essa forma de estilo embutido?

Se você preferir usar um nome de classe, use um nome de classe.

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

Você também pode achar o pacote de nomes de classe útil. Com ele, seu código ficaria assim:

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

Não há uma maneira "correta" de definir estilos condicionais. Faça o que funcionar melhor para você. Para mim, prefiro evitar estilos embutidos e usar classes da maneira que acabei de descrever.

POSTSCRIPT [06-AGO-2019]

Embora seja verdade que o React não tem opinião sobre estilos, atualmente eu recomendaria uma solução CSS-in-JS; ou seja , componentes de estilo ou emoção . Se você é novo no React, use as classes CSS ou estilos embutidos para começar. Mas quando você estiver confortável com o React, recomendo adotar uma dessas bibliotecas. Eu os uso em todos os projetos.

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

Verifique o código acima. Isso será o suficiente.

Se você precisar aplicar condicionalmente estilos embutidos (aplicar tudo ou nada), esta notação também funciona:

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

Caso 'algumaCondição' não seja cumprida, você passa o objeto vazio.

Primeiro, concordo com você em uma questão de estilo - eu também (e também) aplicaria classes condicionalmente em vez de estilos embutidos. Mas você pode usar a mesma técnica:

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

Para conjuntos de estados mais complexos, acumule uma série de classes e aplique-as:

var classes = [];

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

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

em vez disso:

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

você pode tentar o seguinte usando curto-circuito:

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

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

informação importante do link:

Curto-circuito significa que no JavaScript, quando estamos avaliando uma expressão AND (&&), se o primeiro operando for falso, o JavaScript entrará em curto-circuito e nem mesmo olhará para o segundo operando.

É importante notar que isso retornaria falso se o primeiro operando fosse falso, então você deve considerar como isso afetaria seu estilo.

As outras soluções podem ser mais práticas recomendadas, mas pensei que valeria a pena compartilhar.

Outra forma, usando o estilo inline e o operador spread

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

Isso pode ser útil em algumas situações em que você deseja adicionar várias propriedades ao mesmo tempo com base na condição.

Eu me deparei com essa pergunta ao tentar responder à mesma pergunta. A abordagem de McCrohan com as classes array & join é sólida.

Por meio da minha experiência, tenho trabalhado com muito código Ruby legado que está sendo convertido para React e, à medida que construímos o (s) componente (s), encontro-me buscando classes css existentes e estilos inline.

snippet de exemplo dentro de um componente:

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

Novamente, encontro-me buscando o código CSS legado, "empacotando"-o com o componente e seguindo em frente.

Então, eu realmente sinto que está um pouco no ar sobre o que é "melhor", já que esse rótulo pode variar muito dependendo do seu projeto.

A melhor maneira de lidar com o estilo é usando classes com um conjunto de propriedades css.

exemplo:

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

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

Você pode usar algo assim.

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

Ou então, você pode usar o pacote NPM de classnames para tornar os props className dinâmicos e condicionais mais simples de trabalhar (especialmente mais do que a manipulação de string 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'