С React, что является лучшим способом обработки условных классов - PullRequest
Новая
       42

С React, что является лучшим способом обработки условных классов

0 голосов
/ 18 января 2019

У меня много элементов в компоненте, которому требуются «активные» и «отключенные» классы при определенных условиях.

например: 1-Там мне нужно переключить активный класс на клик: - 

<div className="action-group cont-align">
                        <label>Alignment</label>
                        <div className="action-group-inner">
                            <i className="fas fa-align-left" data-align="Left" onClick={this.handleAlign}></i>
                            <i className="fas fa-align-center" data-align="Middle" onClick={this.handleAlign}></i>
                            <i className="fas fa-align-right" data-align="Right" onClick={this.handleAlign}></i>
                        </div>
                    </div>

2-Там также мне нужно переключить активный класс: - 

                    <div className="action-group cont-color">
                        <label>Color</label>
                        <div className="action-group-inner">
                            <i className="color-cont black" onClick={this.handleFontColor} data-color="black"></i>
                            <i className="color-cont blue" onClick={this.handleFontColor} data-color="#2027aa"></i>
                        </div>
                    </div>

3 - Мне нужно добавить класс отключения для шрифта small (если шрифт слишком маленький) и для font-large (когда шрифт слишком большой): - 

                    <div className="action-group cont-fontSize">
                        <label>Size</label>
                        <div className="action-group-inner">
                            <i className="font-small" onClick={this.handleFontSizeDec}>A</i>
                            <i className="font-large" onClick={this.handleFontSizeInc}>A</i>
                        </div>
                    </div>

Нужно ли поддерживать много состояний только для добавления / удаления классов?

Ответы [ 3 ]

0 голосов
/ 18 января 2019

Я бы предложил переместить <i className="fas fa-align-left" data-align="Left" onClick={this.handleAlign}></i> в отдельный компонент и иметь состояние , удерживая его, а затем отобразить это состояние для рендеринга. 

this.state ={
 Alignments:[], // Please add all your allingments here
 Colors:[], // Please add all your Color here
 Sizes:[], // Please add all your Size here
 activeAlingment:0,
 activeColor:0,
 activeSize:0
}

handleSetActiveAllingment  = (index) =>{
  this.setState({activeAlingment:index})
}

handleSetActiveColor  = (index) =>{
  this.setState({activeColor:index})
}

handleSetActiveSize  = (index) =>{
  this.setState({activeSize:index})
}

Пожалуйста, используйте это состояние для сопоставления этого состояния для создания Компонентов. 

this.state.Alignments.map((alingment,Index)=>{
 isactive = this.state.activeAlingment == Index ? "active" : "";
 return <Alingment activeClass={isactive} clickHandler={() => this.handleSetActiveAllingment(Index)}>
});

this.state.Colors.map((color,Index)=>{
 isactive = this.state.activeColor == Index ? "active" : "";
 return <Colors activeClass={isactive} clickHandler={()=>this.handleSetActiveColor(Index)}>
});

Таким образом, ваши компоненты будут для повторного использования иВы также достигнете того, что вам нужно.

0 голосов
/ 18 января 2019

Используйте приведенные ниже фрагменты и интерполяцию строк для выполнения работы: 

const classnames = someCondition? "color-cont black": "color-cont black newStyle others";
<div className=`$(classnames)` ...>
0 голосов
/ 18 января 2019

Вы можете использовать этот пакет: https://github.com/JedWatson/classnames

Пример с состоянием кнопки: 

var classNames = require('classnames');

var Button = React.createClass({
  // ...
  render () {
    var btnClass = classNames({
      btn: true,
      'btn-pressed': this.state.isPressed,
      'btn-over': !this.state.isPressed && this.state.isHovered
    });
    return <button className={btnClass}>{this.props.label}</button>;
  }
});
...