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 模块和 composes 关键字

.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'; }

我对这种方法有两个问题：

  • 将所有使用的颜色重新分配给一个类，然后根据条件分配它有点麻烦。有什么我想念的吗？
  • 有没有更好的方法来处理 React 中的 state 和 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 包。

.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 回答