1

Babel および ES6 構文を使用して React でインジケーター コンポーネントをプログラミングしており、CSS モジュールを使用しているコンポーネントのスタイルを設定しています。コンポーネントは正常に動作していますが、コードの品質を改善したいと考えています。

インジケーターの各状態で、ドットの色が変わります。

import React from 'react'
import ClassNames from 'classnames'

import styles from './Indicator.css'

const Indicator = (props) => {
  const { current, number, enabled } = props

  if (enabled) {
    const dots = []
    for (var i = 0; i < number; i++) {
      // FIXME: It must be a better way to implement this
      let dotStyles = ClassNames(styles.dot, {
        [styles.red]: current === i && i === 0,
        [styles.orange]: current === i && i === 1,
        [styles.yellow]: current === i && i === 2,
        [styles.green]: current === i && i === 3,
        [styles.gray]: current !== i
      })
      dots.push(<div className={dotStyles} key={i} />)
    }
    return <div className={styles.indicator}>{dots}</div>
  } else {
    return <div />
  }
}

const { number, bool } = React.PropTypes
Indicator.propTypes = {
  number: number,
  current: number,
  enabled: bool
}

export default Indicator

スタイルを定義する CSS は、CSS モジュールと compose キーワードを使用します

.indicator {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 12px;
  margin-bottom: 40px;
}

.dot {
  width: 12px;
  height: 12px;
  margin-left: 10px;
  border-radius: 6px;
}

.gray { composes: gray from '../../colors.css'; }
.red { composes: red from '../../colors.css'; }
.orange { composes: orange from '../../colors.css'; }
.yellow { composes: yellow from '../../colors.css'; }
.green { composes: green from '../../colors.css'; }

このアプローチについて 2 つの質問があります。

  • 使用されているすべての色をクラスに再割り当てしてから、条件に応じて割り当てるのは少し面倒です。何か足りないものはありますか？
  • React で状態と classNames の割り当てを処理するより良い方法はありますか? これは単純な例ですが、他のコードに非常に厄介な条件がいくつかあり、それらを避けたいと考えています。

私はreact-css-modulesを調べてきましたが、これまでのところ、コード全体に styles.class があってもかまわないと思います。

4

1 に答える 1

0

コードを最適化するために react-css-modules パッケージを使用することになりました。

const dots = []
for (var i = 0; i < number; i++) {
  const dotClassList = ['red-dot', 'orange-dot', 'yellow-dot', 'green-dot']
  const dotClass = (current === i) ? dotClassList[i] : 'gray-dot'
  dots.push(<div styleName={dotClass} key={i} />)
}
return <div styleName='indicator'>{dots}</div>

また、Compose パターンを使用して、ClassName パッケージの使用を避け、クラスを 1 つだけにしました。

.indicator {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 12px;
  margin-bottom: 40px;
}

.dot {
  width: 12px;
  height: 12px;
  margin-left: 10px;
  border-radius: 6px;
}

.gray-dot {
  composes: gray from '../../colors.css';
  composes: dot;
}

.red-dot {
  composes: red from '../../colors.css';
  composes: dot;
}

.orange-dot {
  composes: orange from '../../colors.css';
  composes: dot;
}

.yellow-dot {
  composes: yellow from '../../colors.css';
  composes: dot;
}

.green-dot {
  composes: green from '../../colors.css';
  composes: dot;
}

他の提案は大歓迎です！

于 2016-09-28T13:30:31.903 に答える