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

Posted 2023-02-23

【中文标题】在 ReactJs 中修改子最后一个组件和 css 属性

【英文标题】：Modifying child last component and css attribute in ReactJs

【发布时间】：2019-01-12 00:37:10

【问题描述】：

我想从我的 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 元素（行）的最后一项

【参考方案1】：

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

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

【讨论】：

它删除了我尝试过的所有连接线 .root .stepconnector:last-child display:none !important; 不工作，删除所有行

现在它正在工作我在 BCrumbItems.css .root:last-child .stepconnector display: none !important;

编辑你的答案我可以接受，因为你建议我“最后一个孩子”部分，谢谢你这很有帮助