[解決済み] Reactにおける条件付きスタイルリングの正しい扱い方

質問

今、Reactをいくつかやっているのですが、条件付きのスタイリングを行うための正しい方法があるのでしょうか？チュートリアルでは

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

インラインのスタイリングは使いたくないので、代わりにクラスを使って条件付きスタイリングを制御したい。Reactの考え方では、どのようにアプローチするのでしょうか？それとも、このインライン・スタイリングの方法を使うべきなのだろうか？

どのように解決するのですか？

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

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

また クラス名 パッケージが便利です。これを使うと、あなたのコードは次のようになります。

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

条件付きスタイルを行うのに、正しい方法はありません。自分にとって最適な方法で行なえばよいのです。私自身は、インラインでのスタイル指定を避け、今説明したような方法でクラスを使用することを好んでいます。

追記[06-aug-2019]です。

Reactはスタイリングに無頓着なのは事実ですが、最近はCSS-in-JSのソリューションを推奨しています。 スタイル付きコンポーネント または エモーション . Reactを初めて使う場合は、最初はCSSのクラスやインラインスタイルにこだわってください。しかし、Reactに慣れてきたら、これらのライブラリのいずれかを採用することをお勧めします。私はすべてのプロジェクトでこれらを使用しています。