Reactで条件付きスタイリングを処理する正しい方法

私は今Reactを行っていますが、条件付きスタイリングを行う「正しい」方法があるかどうか疑問に思っていました。彼らが使用するチュートリアルでは

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

インラインスタイルを使用したくないので、代わりにクラスを使用して条件付きスタイルを制御したいと思います。Reactの考え方でこれにどのようにアプローチしますか？それとも、このインラインスタイリング方法を使用する必要がありますか？

クラス名を使用したい場合は、必ずクラス名を使用してください。

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

classnamesパッケージも役立つ場合があります。これを使用すると、コードは次のようになります。

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

条件付きスタイリングを行う「正しい」方法はありません。自分に最適なことは何でもしてください。私自身は、インラインスタイルを避け、今説明した方法でクラスを使用することを好みます。

POSTSCRIPT [2019年8月6日]

Reactがスタイリングについて無関心であることは事実ですが、最近はCSS-in-JSソリューションをお勧めします。つまり、スタイル設定されたコンポーネントまたは感情。Reactを初めて使用する場合は、最初にCSSクラスまたはインラインスタイルに固執してください。しかし、Reactに慣れたら、これらのライブラリの1つを採用することをお勧めします。私はすべてのプロジェクトでそれらを使用しています。

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

上記のコードを確認してください。それでうまくいきます。

インラインスタイルを条件付きで適用する（すべてまたはまったく適用しない）必要がある場合は、この表記も機能します。

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

'someCondition'が満たされない場合は、空のオブジェクトを渡します。

まず、スタイルの問題としてあなたに同意します。インラインスタイルではなく、条件付きでクラスを適用します（また、そうします）。ただし、同じ手法を使用できます。

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

より複雑な状態のセットの場合は、クラスの配列を蓄積して適用します。

var classes = [];

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

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

これの代わりに：

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

短絡を使用して次のことを試すことができます。

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

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

リンクからの情報の重要なビット：

短絡とは、JavaScriptでAND式（&&）を評価するときに、最初のオペランドがfalseの場合、JavaScriptが短絡し、2番目のオペランドを見ることさえないことを意味します。

最初のオペランドがfalseの場合、これはfalseを返すため、これがスタイルにどのように影響するかを考慮する必要がある場合があることに注意してください。

他の解決策はよりベストプラクティスかもしれませんが、共有する価値があると考えました。

別の方法として、インラインスタイルとスプレッド演算子を使用します

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

この方法は、条件に基づいて同時に多数のプロパティを追加する場合に役立ちます。

同じ質問に答えようとしているときに、この質問に出くわしました。クラス配列と結合を使用したMcCrohanのアプローチは堅実です。

私の経験を通して、私はReactに変換されている多くのレガシーRubyコードを扱ってきました。コンポーネントを構築するにつれて、既存のcssクラスとインラインスタイルの両方に手を差し伸べていることに気付きます。

コンポーネント内のスニペットの例：

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

繰り返しになりますが、レガシーcssコードに手を伸ばし、コンポーネントと一緒に「パッケージ化」して次に進みます。

ですから、プロジェクトによってラベルが大きく異なるので、何が「ベスト」なのかは少し気になります。

スタイリングを処理する最良の方法は、cssプロパティのセットを持つクラスを使用することです。

例：

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

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

あなたはこのような何かを使うことができます。

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

または、classnames NPMパッケージを使用して、動的で条件付きのclassName小道具を簡単に操作できるようにすることができます（特に条件付き文字列操作よりも簡単です）。

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'