4

私は反応を使用していますが、classNames と呼ばれるコンポーネントの css クラスを定義するのに役立つこの素晴らしいライブラリを見つけました。また、css をコンポーネントにインポートするために webpack css-loader を使用しています。インポート css で classNames を使用しようとすると、構文エラーが発生します。

これが私の例です:

import React from 'react';
import styles from './style.css';
import classNames from 'classnames';

export default class Menu extends React.Component {
    render() {
        let style = classNames({
            styles.someClass: true
        });
    }
}

どうすれば両方を使用できますか?

4

1 に答える 1

9

たとえば、ES6/2015の計算されたプロパティ構文を使用できます。

import React from 'react';
import styles from './style.css';
import classNames from 'classnames';

export default class Menu extends React.Component {
  render() {
    const style = classNames({
      // This is a computed property, i.e. surrounded by []
      [styles.someClass]: true
    });
  }
}

しかし、それは単一のクラスのためだけです。これらの単純なケースでは、次のようにすることができます:

const style = this.state.active ? styles.someClass : '';

classNames ライブラリは、次のように複数のクラスを組み合わせる場合に特に便利です。

import React from 'react';
import styles from './style.css';
import classNames from 'classnames';

export default class Menu extends React.Component {
  render() {
    const style = classNames(
      // add as many classes or objects as we would like here
      styles.foo,
      styles.bar,
      { [styles.someClass]: this.props.active }
    );
  }
}
于 2016-06-15T05:56:38.767 に答える