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

标签 javascript css reactjs components

我想显示我的父组件中的这三张图片,我试图删除 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 元素(行)的最后一项

最佳答案

使用 last-child,一个 CSS 选择器:

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

关于javascript - 在 ReactJs 中修改子最后一个组件和 css 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51684122/

相关文章:

css - 添加 ng-app 指令值时,html css 不起作用

html - 使用 div 拆分 HTML 页面

jquery - 更改 jquery-ui 按钮的事件状态

reactjs - 缩小/优化 NextJS 站点

javascript - 无法识别DIV id?

javascript - Google 脚本将 23.000 行的颜色转换为十六进制代码

javascript - Google map - 将信息传递给事件监听器

javascript - react : Adding an object to an array in state through input fields

javascript - 尝试将 redux 集成到 React 应用程序中。 Webpack 对 store.js 感到窒息

javascript - 使用变量时无效的 JSON 原语