[解決済み] React.jsのインラインスタイルのベストプラクティス【終了しました

質問

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つの場所をチェックする必要があります。

解決方法は？

ベストプラクティスはまだ多くありません。Reactコンポーネントにinline-stylesを使用している私たちは、まだ非常に実験的な段階です。

アプローチは千差万別です。 Reactインラインスタイルリブ比較表

オール・オア・ナッシング？

私たちが「スタイル」と呼ぶものには、実はかなり多くの概念が含まれています。

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

ステートスタイルから始める

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 (アンダースコア/ロダッシュ) を使って、複数の状態をサポートするようにしました。

// 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には優れたレイアウトシステムがいくつもあります。私なら、そのうちのひとつを使うだけです。

とはいえ、レイアウトスタイルを直接コンポーネントに追加するのはやめましょう。レイアウトコンポーネントでコンポーネントを包み込みましょう。以下はその例です。

// 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 .

外観

これは、"inline-style" "の議論の中で最も論争になっている部分です。最終的には、あなたがデザインするコンポーネントと、あなたのチームがJavaScriptに慣れているかどうかにかかっています。

ひとつだけ確かなことは、ライブラリの助けが必要だということです。ブラウザ・ステート( :hover , :focus )、メディアクエリは生のReactでは苦痛です。

私が好きなのは ラジウム なぜなら、これらのハードパーツのシンタックスは、SASSのそれをモデルとして設計されているからです。

コード構成

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

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

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

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

ゲッター関数

テンプレートに多くのスタイルロジックを追加すると、少し面倒になることがあります (上の図参照)。私は、スタイルを計算するためのゲッター関数を作成するのが好きです。

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を使うだけ」がベストな場合 .

新しい発見があれば、喜んでお手伝いしますよ :) よろしくお願いします。 チャンタスティック