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

Question

我想从我的 Parent 组件中显示这三个图像，并且我试图删除 Summary breadcrumb 之后的行。

trying to remove last line 这是我的父类的根类，并试图只显示三个图像而不是行。

这是 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.css 文件

.root {
 color: #297848;
 font-size: 12px;
 text-align: center;
 margin-left: 13%;
 display: flex;
 justify-content: space-evenly;

}

.step-title {
 color: #297848;
 font-size: 12px;
 text-align: center;
}

.step-icon.active {
 height: 28px;
 margin-bottom: 3px;
}

div.disabled {
 height: 28px;
 opacity: 0.5;
 pointer-events: none;
}

.stepconnector {
 position: fixed;
 height: 1.7px;
 width: 3.6%;
 margin-top: 2%;
 background-color: #ccc;
 margin-left: 3.6%;
 display: block;
}

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;

这是显示 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;

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

Answer 1

使用 last-child，一个 CSS 选择器：

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