Javascript 如何在React JS中以编程方式更改flex box的顺序

收到通知后，flex box的顺序不会改变

我尝试按类名获取元素并为其分配顺序。但它不起作用

但是改变innerHTML是可行的

document.getElementsByClassName(style.notificationCard)[0].innerHTML = "notification received";

import React，{Component}来自'React'；
从“./HomePage.css”导入样式
从“react dom”导入*作为react dom；
类主页扩展组件{
onNotificationClick=（）=>{
document.getElementsByClassName（style.notificationCard）[0]。订单=2；
};
render（）{
返回(
创建内存
通知
警报
组
收到的通知
);
}
}
导出默认主页
.main{
背景:#9696；
身高：100%；
宽度：100%；
显示器：flex；
对正内容：空间均匀；
对齐项目：居中；
弯曲方向：立柱；
}
.createCard{
顺序：2；
背景：水；
宽度：100%；
高度：120px；
}
.通知卡{
顺序：1；
宽度：100%；
高度：120px；
}
.艾特斯卡德{
顺序：4；
宽度：100%；
背景：水；
高度：120px；
}
.groupsCard{
顺序：3；
宽度：100%；
高度：120px；
}
尝试访问元素的样式，成功

这是同样的代码


import React，{Component}来自'React'；
从“./HomePage.css”导入样式
从“react dom”导入*作为react dom；
类主页扩展组件{
onNotificationClick=（）=>{
log（document.getElementsByClassName（style.notificationCard））；
document.getElementsByClassName（style.notificationCard）[0].style.order=2；
document.getElementsByClassName（style.createCard）[0].style.order=1；
};
render（）{
返回(
创建内存
通知
警报
组
收到的通知
);
}
}
导出默认主页不要使用
getElementsByClassName
或任何其他基于选择器的方法来访问组件的部分。相反，使用组件状态，或者如果没有其他选择，则使用
ref
。在这里，组件状态将正常工作，如下所示

请注意，我还做了一些其他更改，以使代码段正常工作，例如使用来自CDN的React和“普通”CSS，而不是导入
样式
。我不是建议您在应用程序中更改这些内容


类主页扩展React.Component{
状态={
notificationIsClicked:false
}
onNotificationClick=（）=>{
this.setState（{notificationIsClicked:true}）
};
render（）{
const{notificationIsClicked}=this.state；
返回(
创建内存
通知
警报
组
收到的通知
);
}
}
ReactDOM.render（，document.getElementById（“根”））
.main{
背景:#9696；
身高：100%；
宽度：100%；
显示器：flex；
对正内容：空间均匀；
对齐项目：居中；
弯曲方向：立柱；
}
.createCard{
顺序：2；
背景：水；
宽度：100%；
高度：120px；
}
.通知卡{
顺序：1；
宽度：100%；
高度：120px；
}
.点击.通知卡{
顺序：2；
}
.艾特斯卡德{
顺序：4；
宽度：100%；
背景：水；
高度：120px；
}
.groupsCard{
顺序：3；
宽度：100%；
高度：120px；
}
.点击.分组{
顺序：4；
}

更优雅的方法是在组件中创建一个状态（例如默认情况下NotificationReceived false），然后用onClick事件更改它。之后，您可以在css.NotificationCardReceived中添加一个类，并在render
className={style.notificationCard+（this.state.NotificationReceived？style.NotificationCardReceived:''）中使用类条件
您所做的与react的设计目的相反。是否可以更改flex box所有子元素的顺序？我不确定您的意思，但您可以根据组件的状态做您想做的事情。也许您要做的是向父级添加一个额外的CSS类，然后使用诸如
.clicked.notificationCard
.clicked.alertsCard
等选择器来更改order属性。如果你有一个更复杂的要求，也许你应该考虑问一个新的问题。我的意思是，按一下按钮，我需要改变2个子元素的顺序。通知卡{顺序：2}我更新了答案，改变了其中两个孩子，正如我在之前的评论中暗示的那样。