601

次のように、React クラス内でスタイルを指定できることは承知しています。

const MyDiv = React.createClass({
  render: function() {
    const style = {
      color: 'white',
      fontSize: 200
    };
    
    return <div style={style}> Have a good and productive day! </div>;
  }
});

この方法ですべてのスタイリングを行い、CSS ファイルでスタイルをまったく指定しないようにする必要がありますか?

それとも、インライン スタイルを完全に避けるべきですか?

両方を少しずつ行うのは奇妙で面倒に思えます。スタイリングを微調整するときは、2 つの場所をチェックする必要があります。

4

20 に答える 20

503

「ベスト プラクティス」はまだ多くありません。React コンポーネントにインライン スタイルを使用している私たちは、まだ非常に多くの実験を行っています。

大きく異なるいくつかのアプローチがあります: React inline-style lib comparison chart

全部かゼロか？

私たちが「スタイル」と呼んでいるものには、実際にはかなりの数の概念が含まれています。

  • レイアウト —要素/コンポーネントが他の要素との関係でどのように見えるか
  • 外観 —要素/コンポーネントの特性
  • 動作と状態 —要素/コンポーネントが特定の状態でどのように見えるか

状態スタイルから始める

React はすでにコンポーネントの状態を管理しているため、状態と動作のスタイルは、コンポーネント ロジックとのコロケーションに自然に適合します。

条件付き状態クラスでレンダリングするコンポーネントを構築する代わりに、状態スタイルを直接追加することを検討してください。

// Typical component with state-classes
<li 
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />


// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />

外観をスタイルするためにクラスを使用していますが、状態と動作.is-に接頭辞付きのクラスを使用していないことに注意してください。

Object.assign(ES6) または_.extend(underscore/lodash) を使用して、複数の状態のサポートを追加できます。

// Supporting multiple-states with inline-styles
<li 'todo-list__item'
 style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

カスタマイズと再利用

使用Object.assignするようになったので、コンポーネントをさまざまなスタイルで再利用可能にすることが非常に簡単になります。デフォルトのスタイルをオーバーライドしたい場合は、次のように props を使用して呼び出しサイトで行うことができます<TodoItem dueStyle={ fontWeight: "bold" } />。次のように実装します。

<li 'todo-list__item'
 style={Object.assign({},
         item.due && styles.due,
         item.due && this.props.dueStyles)}>

レイアウト

個人的には、レイアウト スタイルをインライン化する説得力のある理由はわかりません。優れた CSS レイアウト システムは数多くあります。1つだけ使用します。

ただし、レイアウト スタイルをコンポーネントに直接追加しないでください。コンポーネントをレイアウト コンポーネントでラップします。これが例です。

// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
 className="col-xs-12 col-sm-6 col-md-8"
 firstName="Michael"
 lastName="Chan" />

// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
  <UserBadge
   firstName="Michael"
   lastName="Chan" />
</div>

レイアウトをサポートするために、コンポーネントを と になるように設計することがよく100% widthありheightます。

外観

これは、「インライン スタイル」の議論で最も論争の的となっている分野です。最終的には、設計するコンポーネントと JavaScript を使用するチームの快適さにかかっています。

1 つ確かなことは、図書館の支援が必要になるということです。ブラウザーの状態 ( :hover、:focus)、およびメディア クエリは、生の React では苦痛です。

私がRadiumを気に入っているのは、これらの難しい部分の構文が SASS の構文をモデル化するように設計されているからです。

コード編成

多くの場合、モジュールの外側にスタイル オブジェクトが表示されます。todo-list コンポーネントの場合、次のようになります。

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

ゲッター関数

テンプレートに一連のスタイル ロジックを追加すると、少し面倒になる可能性があります (上記のように)。スタイルを計算する getter 関数を作成するのが好きです。

React.createClass({
  getStyles: function () {
    return Object.assign(
      {},
      item.props.complete && styles.complete,
      item.props.due && styles.due,
      item.props.due && this.props.dueStyles
    );
  },

  render: function () {
    return <li style={this.getStyles()}>{this.props.item}</li>
  }
});

さらに見る

今年初めに React Europe でこれらすべてについて詳しく説明しました:インライン スタイルと「CSS のみを使用する」のが最適な場合。

あなたが途中で新しい発見をするのを喜んでお手伝いします:)私に連絡してください-> @chantastic

于 2015-07-26T15:56:01.803 に答える
50

React コンポーネント内でインライン スタイルを広範囲に使用しています。コンポーネントが持つスタイルと持たないスタイルが常に明確であるため、コンポーネント内にスタイルを配置する方がはるかに明確です。さらに、Javascript のすべての機能を手元に置くことで、より複雑なスタイリングのニーズが本当に単純化されます。

最初は納得できませんでしたが、数か月試した後、完全に変換され、すべての CSS をインラインまたは他の JS 駆動型の CSS メソッドに変換中です。

Facebook の従業員であり、React の寄稿者である「vjeux」によるこのプレゼンテーションも非常に役立ちます — https://speakerdeck.com/vjeux/react-css-in-js

于 2015-02-21T17:40:47.040 に答える
20

James K Nelson は、彼の手紙「Why You Shouldn't Style React Components With JavaScript」の中で、インライン スタイルを使用する実際の必要性はないと述べていますが、その欠点もあります。彼の声明は、less/scss を使用した古い退屈な CSS が最善の解決策であるというものです。CSSを支持する彼の論文の一部：

  • 外部拡張可能
  • 分離可能 (インライン スタイルがすべてに重なる)
  • デザイナーフレンドリー
于 2015-12-17T13:37:16.480 に答える
9

JSX構文でのブール値ベースのスタイリングは次のとおりです。

style={{display: this.state.isShowing ? "inherit" : "none"}}
于 2019-03-19T11:08:53.990 に答える
3

私は通常、各 React コンポーネントに関連付けられた scss ファイルを持っています。しかし、コンポーネントをロジックでカプセル化して調べない理由がわかりません。つまり、Web コンポーネントについても同様のことが言えます。

于 2015-06-19T08:13:41.600 に答える
3

インライン スタイルの問題は、コンテンツ セキュリティ ポリシー (CSP) がより一般的になりつつあり、それが許可されていないことです。したがって、インライン スタイルを完全に避けることをお勧めします。

更新: さらに説明すると、CSP はサーバーによって送信される HTTP ヘッダーであり、ページに表示できるコンテンツを制限します。これは、開発者がサイトのコーディングを適切に行っていない場合に攻撃者がいたずらを行うのを阻止するためにサーバーに適用できる、さらなる軽減策です。

これらの制限のほとんどの目的は、XSS (クロスサイト スクリプティング) 攻撃を阻止することです。XSS は、攻撃者が独自の JavaScript をページに含める方法を見つけ出す場所です (たとえば、私が自分のユーザー名を作成してbob<SCRIPT>alert("hello")</SCRIPT>コメントを投稿し、そのページにアクセスした場合、アラートは表示されません)。script>開発者は、ユーザーがこのようなコンテンツをサイトに追加する機能を拒否する必要がありますが、間違いを犯した場合に備えて、タグが見つかった場合、CSP はページの読み込みをブロックします。

CSP は、開発者が間違いを犯した場合に、攻撃者がそのサイトへの訪問者に問題を引き起こすことができないようにするための追加レベルの保護です。

すべてが XSS ですが、攻撃者が<script>タグを含めることはできませんが、タグを含め<style>たり、タグにstyle=パラメーターを含めたりすることはできますか? 次に、だまされて間違ったボタンをクリックさせたり、その他の問題を引き起こすような方法で、サイトの外観を変更できる可能性があります。これはあまり問題ではありませんが、それでも避けるべきものであり、CSP が自動的にそれを行います。

CSP のサイトをテストするための適切なリソースは、https: //securityheaders.io/ です。

CSP の詳細については、 http: //www.html5rocks.com/en/tutorials/security/content-security-policy/ を参照してください。

于 2015-03-19T01:06:33.693 に答える
3

構成に応じて、インライン スタイルはホット リロードを提供できます。スタイルが変更されるたびに、Web ページはすぐに再レンダリングされます。これにより、コンポーネントをより迅速に開発できます。そうは言っても、CSS + SCSS のホット リロード環境をセットアップできると確信しています。

于 2016-08-17T18:17:25.273 に答える