时间戳

首页 > 解决方案 > 使用 React 处理条件类的最佳方法是什么

reactjs - 使用 React 处理条件类的最佳方法是什么

问题描述

我在组件上有许多元素，在某些条件下需要“活动”和“禁用”类。

例如-：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-我需要在font-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>

我是否需要维护许多状态只是为了添加/删除课程？

标签： reactjsevent-handlingdeclarative-programming

解决方案

我建议将它移动<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)}>
});

这样，您的组件将是可重用的，您也将实现您所需要的。

推荐阅读