Javascript react组件中新行上的CSS更改

我有一个react组件，它包含内联块div项，每个项都有一个边框，以提供“分隔符”视觉效果。但是，如果它达到父组件的最大宽度，无论是通过初始加载还是进一步调整窗口大小，该行的最后一项都不应具有右边框。它应该是这样的：

项目1 |项目2 |项目3 |项目4

项目5 |项目6 |项目7

我已经读过关于使用jquery来检测一个项何时具有offsetTop值的更改，但我不确定它将如何与react组件交互。欢迎提供任何指导。

您可以使用css：

:nth-last-child {
    border-right-style: none;
}

---

这里的技巧是使用

ref

获取项目的左偏移量，如果项目的左偏移量为

0

，则向其添加

最左边的

类。安装组件后进行计算（在

componentDidMount

方法中）

此外，我还添加了

version

道具，每次调整窗口大小时都会增加这些道具（取消公告以避免过度更新，如果需要，您可以降低超时时间或将其全部删除），以便在调整浏览器窗口大小时强制重新计算边框的状态

确保在整页模式下运行演示，以查看调整浏览器窗口大小时发生的情况

类项扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
isLeftMost:false
};
this.recommeceborder=（）=>{
if（this.el）{
this.setState（{isLeftMost:this.el.offsetLeft==0}）；
}
}
}
componentDidMount（）{
这是一个；
}
componentDidUpdate（）{
这是一个；
}
shouldComponentUpdate（下一步，下一步状态）{
return（nextrops.label！==this.props.label）
||（nextrops.version！==此.props.version）
||（nextState.isLeftMost！==this.state.isLeftMost）；
}
render（）{
设cl=this.state.isLeftMost？“项最左边”：“项”；
返回(
this.el=el}>{this.props.label}
);
}
}
类容器扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={version:0}；
让_updateDimensions=（）=>{
this.setState（{version:this.state.version+1}）；
}
this.updateDimensions=u.debounce（_updateDimensions，25）；
}
componentDidMount（）{
window.addEventListener（“resize”，this.updateDimensions）；
}
组件将卸载（）{
removeEventListener（“resize”，this.updateDimensions）；
}
render（）{
设项目=[]；
对于（让i=0；iincracable）！这是一个全面的解决方案，也是对ref属性的一个很好的介绍。非常感谢