javascript - 如何使用反应在循环中基于当前 div 制作前置 div 样式

Question

嗨，我遇到了一些 css 问题，你能帮我解决这个问题吗？

实际上我正在基于循环创建 Div，并且基于某些条件我正在添加 css

像这样：

 {item?.depots?.distributionDepot?.map((depot, index) => (
                    <div
                      className={`multi-spply-container ` }
                      style={borderStyle(item,depot.depotName,index+1,item?.depots?.distributionDepot?.length)}
                      key={index}
                    >content
</div>}

所以在这里为 div 添加边框我调用的是borderStyle const

const borderStyle = (item, depotName,number,total) => {
    debugger;
    console.log(depotName);
    let borderBottom = "6px solid #cacaca";
    let borderRight = "6px solid #cacaca";
    let borderLeft = "6px solid #cacaca";
    let intransits = false

    item.inTransit.map((intransit, i) => {
      if (intransit.from === depotName) {
        borderBottom = "6px solid #4A4F76";
        borderRight = "6px solid #4A4F76";
        borderLeft = "6px solid #4A4F76";
        intransits=true
      }
   
      });

如果条件为真，我将线条颜色更改为蓝色，但我的问题是假设如果当前条件为真，那么前面的 div 应该与当前的相同，我该怎么做？

请帮助我。

这张图片你可以看到第 3 格线是蓝色的，所以我想让前面的线（第 2 格）线也作为第 3 格线颜色

标签： javascriptcssreactjs