React의 조건에 따라 CSS 클래스 이름을 지정하는 더 좋은 방법이 있습니까?

Question

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 모듈을 사용하고 구성하는 나는이 방법에 대한 두 가지 질문이

.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를 가지고 있어도 상관 없다고 생각합니다.

Answer 1

나는 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> 

클래스 이름 패키지 사용을 피하기 위해 작성 패턴을 사용했습니다.

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

기타 의견을 환영합니다!