私は今、いくつかのReactを行っていますが、条件付きスタイルを行うための「正しい」方法があるかどうかは疑問でした。チュートリアルでは、彼らは私が代わりに条件付きスタイリングを制御するためのクラスを使用したい私は、インラインスタイルを使用しないReactで条件付きスタイルを扱う正しい方法
style={{
textDecoration: completed ? 'line-through' : 'none'
}}
を使用しています。どのようにしてリアクションの考え方でこれにアプローチしますか？または、私はこのインラインスタイリングの方法を使うべきですか？
あなたはすべての手段によって、クラス名を使用する場合クラス名を使用します。
className={completed ? 'text-strike' : null}
classnamesパッケージが役立つ場合もあります。それで、あなたのコードは次のようになります：
className={classNames({ 'text-strike': completed })}
条件付きスタイリングを行う正しい方法はありません。あなたのために何が一番うまくやるか。私自身は、インライン・スタイリングを避け、今説明した方法でクラスを使用する方が好きです。
まず、スタイルの問題として私はあなたに同意します。私は、インラインスタイルではなくクラスを条件付きで適用することもあります。 、状態のより複雑なセットの場合
<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>;
<div style={{ visibility: this.state.driverDetails.firstName != undefined? 'visible': 'hidden'}}></div>
上記のコードを確認してください。それはトリックを行います。
このようなものを正確に探していた。条件付きインラインスタイリング、ありがとう。 –
あなたは 'redux'と' react'を混乱させるかもしれないと思います。 Reduxはスタイリングとは関係ありません。 – rossipedia
私はあなたの好みがドキュメントのためにスポットライトだと思うが、マークアップインターチェンジの互換性が重要ではないアプリケーションには熱心だと思う。いくつかの主要なWebアプリケーションは、実際にクラスを取り除き、インラインスタイルのみを使用しています。これは、より予測可能で簡単な5つの適用ルールのどれよりもテキストを太字にしています。アトリビュートが動的な場合、繰り返しのドキュメントと同じように、帯域幅をあまり節約できません。アプリケーションのセマンティクス（ビューソースマークアップ）はそれほど重要ではありません... – dandavis
@rossipediaああ、ありがとう、ありがとう、これについて考えるとき、reduxチュートリアルを見ていた、ありがとう！ – davidhtien