Javascript 修改ReactJs中的最后一个子组件和css属性

我想显示来自父组件的这三个图像，我正在尝试删除Summary breadcrumb之后的行

这是我的父类的根类，尝试只显示三个图像，但不显示行

这是BCrumb.css文件

.root {
 color: #fff;
 font-size: 12px;
 display: flex;
 padding: 1px;
 justify-content: initial;
 margin-left: 1%;
}

This is BCrumb.tsx class

import * as React from "react";
import classes from "./BCrumb.css";

interface IBCrumbProps {
 children?: any;
}

class BCrumb extends React.Component<IBCrumbProps, {}> {
  render() {
   console.log("Children>>>>"+React.Children.count(this.props.children));

   return <div className={classes.root}>
             {React.Children.map(this.props.children, (child , i) => {
               // here i am trying to hide the line after summary but i //dont know how to implement it here
               if (i == 3) return
               return child
             })}
         </div>;
 }
}

export default BCrumb;

BCItems.tsx类

import * as React from "react";
import classes from "./BCItem.css";
import classnames from "classnames";

interface IBCItemProps{
 children?: any;
 active?: boolean;
 inactiveSrc?: boolean;
 activeSrc?: boolean;
}

class BCItems extends React.Component<IBCItemProps, {}> {
 render() {
   const { children, active, activeSrc, inactiveSrc, label } = this.props;

   const className = classnames({
     [classes.root]: true,
     [classes.disabled]: !active
   });
   //var i = ;

   return (
     <div className={className}>
       <div>
         {active ? (
           <img className={classes.img1} src={activeSrc} />
         ) : (
           <img className={classes.img1} src={inactiveSrc} />
         )}
         <p className={classes.labelText}>{label}</p>
       </div>

       <div className={classes.stepconnector}></div>
     </div>

   );
 }
}

export default BCItems;

import*as React from“React”；
从“/BCItem.css”导入类；
从“类名”中导入类名；
接口IBCItemProps{
儿童？：任何；
活动？：布尔值；
InactiveVesrc？：布尔值；
activeSrc？：布尔值；
}
类BCItems扩展了React.Component{
render（）{
const{children，active，activeSrc，inactiveSrc，label}=this.props；
const className=类名称({
[classes.root]：对，
[classes.disabled]：！活动
});
//变量i=；
返回(
{活动(
) : (
)}
{label}
);
}
}
导出默认项目；

这是显示BCrumb项的类

import * as React from "react";
import BCItems from "../../components/BCrumb/BCItems";
import BCrumb from "../../components/BCrumb/BCrumb";
import Step1_1 from "../../../assets/step-1-active.png";
import Step1_0 from "../../../assets/step-1.png";

import step2_1 from "../../../assets/step-2-active.png";
import step2_0 from "../../../assets/step-2.png";

import step3_1 from "../../../assets/step-3-active.png";
import step3_0 from "../../../assets/step-3.png";

import classes from "./HomePage.css";
class HomePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { setAct1: true, setAct2: false };
  }
  render() {
    const styles = {
      containerStyle: {
        paddingLeft: 37
      }
    };
    const { containerStyle } = styles;

    return (
      <div>
        <BCrumb>
            <BCItems
              active={true}
              activeSrc={Step1_1}
              inactiveSrc={Step1_0}
              label="Profile"
            />
            <BCItems
              active={true}
              activeSrc={Step2_1}
              inactiveSrc={Step2_0}
              label="DashBoard"
            />

             <BCItems
              active={true}
              activeSrc={Step3_1}
              inactiveSrc={Step3_0}
              label="Summary"
            />    
        </BCrumb>
      </div>
    );
  }

}

export default HomePage;

import*as React from“React”；
从“../../components/BCrumb/BCItems”导入BCItems；
从“../../components/BCrumb/BCrumb”导入BCrumb；
从“../../../assets/step-1-active.png”导入步骤1_1；
从“../../../assets/step-1.png”导入步骤1_0；
从“../../../assets/step-2-active.png”导入步骤2_1；
从“../../../assets/step-2.png”导入步骤2_0；
从“../../../assets/step-3-active.png”导入步骤3_1；
从“../../../assets/step-3.png”导入步骤3_0；
从“/HomePage.css”导入类；
类。组件{
建造师（道具）{
超级（道具）；
this.state={setAct1:true，setAct2:false}；
}
render（）{
常量样式={
集装箱运输方式：{
paddingLeft:37
}
};
const{containerStyle}=样式；
返回(
);
}
}
导出默认主页；

---

我不知道如何使用React.Children.map从父类中隐藏css元素（行）的最后一项，使用css选择器：

 .root:last-child .stepconnector { 
       display: none !important; 
     }

---

它删除了我也尝试过的所有连接线。root.stepconnector:last child{display:none！important；}不工作，删除所有线。它工作了，我在BCrumbItems.css中使用它。root:last child.stepconnector{display:none！important；}编辑你的ans我可以接受你建议的“last child”部分，谢谢，这很有帮助

 .root:last-child .stepconnector { 
       display: none !important; 
     }