インライン・スタイリングに反応する、悪いこと？ 「反応」からリアクト</p> <p>インポート;：例えば

Question

私は基本的に見せかけ<h1>あるこの超簡単な'Heading'コンポーネントを、持っています

class Heading extends React.Component { 

    render() { 

     const style = { 
      'color' : 'red' 
     }; 

     return (
      <h1 className='heading' style={style}> 
       {this.props.title} 
      </h1> 
     ); 
    } 
} 

export default Heading; 

これはDOMでこのように見えるように出てレンダリング：

<h1 class="heading" style="color: red;">Heading</h1> 

優秀な、格好良いです。ページにこれらのコンポーネントがたくさんある場合は、次のようになります。

<h1 class="heading" style="color: red;">Heading</h1> 
<h1 class="heading" style="color: red;">Heading</h1> 
<h1 class="heading" style="color: red;">Heading</h1> 
<h1 class="heading" style="color: red;">Heading</h1> 

スタイル属性が何度も繰り返されていることに注目してください。これは私の質問です、これは悪いことですか？それは問題ですか？私が知ることは、サーバーからプレレンダーされたこのhtmlページをダウンロードしていないため、悪いことではないということです。だから、それらの繰り返しスタイルはすべて、より大きなファイルサイズに計算されていません。

これが本当なら... はなぜインラインスタイリングを使用しないのですか？

免責事項：私はstackoverflowがこのような質問に対して「閉鎖」されていることを理解しています。あなたが深く怒っているなら、私はここに尋ねた（私は誰だと思いますか？）私ができるサイトとコミュニティを教えてください:)

Answer 1

スタイルをインライン展開することは必ずしも悪くはありません同意しない純粋主義者）。私は、いくつかのインライン展開が理にかなっていると信じています。あなたが一回限りの概念証明を生成しているなら、それを求めてください。もしそれが昨日行われなければならず、来週リファクタリング時間があれば、それは機能するかもしれません。

あなたが所持しているものは、（リアクションコードにある）HTMLを見ると、あなたがしようとしている視覚的な変化が見られます。

私が正しいかどうかを判断しようとするのは、長期的な影響です。数年後にこの色が赤色に変わることを望む人はどうなりますか？その場所にいる開発者は、コードではなくCSSを最初に考えるだろう。

私はインラインスタイルではなく、適切な分類だけに頼って、コードを掘り起こして再コンパイルするのではなく、CSSファイルを変更してビジュアルスタイルを調整することができます。また、インラインスタイルはCSSコード（外部ファイルから）でオーバーライドするのが難しいことに注意してください。