Javascript 从数组onClick-in-React创建的样式化div

所以我有一个这样的数组

constdivs=[“Text 1”、“Text 2”、“Text 3”]

。 我在渲染函数中从这个数组创建div（一个小菜单）

var createThreeDivs = divs.map((category) => {
        return <div key={category} onClick={this.handleClick} className="myDivClass">{category}</div>
});

var createThreeDivs=divs.map（（类别）=>{
返回{category}
});

我想在单击其中一个div时设置其样式，然后删除其余div的样式。因此，当我选择一个div时，它会得到一种颜色，并删除其余div上的颜色

在没有虚拟DOM的普通javascript中，我可以这样做：

handleClick(e) {

    //remove styling from others
    var allDivs = document.getElementsByClassName("myDivClass");
    for(var i = 0; i < allDivslength; i++) {
        allDivs[i].classList.remove("myDivClass-styled");
    }

    //Add styling class to selected,
    e.target.classList.add("myDivClass-styled");

}

handleClick（e）{
//从其他样式中删除样式
var allDivs=document.getElementsByClassName（“myDivClass”）；
对于（var i=0；i

但这会直接操纵DOM。我该如何在React中做类似的事情

---

我已经看到了一些示例，这些示例说明了如何通过仅使用一个元素的state，而不使用创建div的数组来实现这一点。但是我不能为这种情况想出一个好的解决方案。有什么建议吗？

使用组件的状态，您可以根据活动的

div

更新颜色。当用户单击时更新活动div的索引，当索引等于单击的div时，更新该div的颜色

Pass current text from html
 handleClick = (text)=>{
this.setState({activeText:text})
}

Inside create div function add class dynamically 

Div className = { stat condition ? Class : no class }

见下面的例子

类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={
活动：0
};
}
render（）{
常量divs=[“文本1”、“文本2”、“文本3”]；
const updateActiveDiv=（值）=>{
此.setState（（）=>{
//此行将重置该值为
//如果两次单击同一元素，则为null
if（值===此.state.active）{
值=空；
};
返回{
活动：值
}
});
};
让divText=divs.map（（div，i）=>{
让color=this.state.active==i？'red'：'black'；
返回updateActiveDiv（i）}>{div}；
});
返回(
{divText}
);
}
}
ReactDOM.render（，document.getElementById（'root'））；

---

谢谢！如果我想单击活动div，然后删除样式，怎么做？