时间戳

首页 > 解决方案 > 在 React 和 SCSS 中条件渲染列表项的特殊性问题

javascript - 在 React 和 SCSS 中条件渲染列表项的特殊性问题

问题描述

在为具有更通用的“li”元素标识符的每个列表项应用样式之后，我正在尝试为每个单独的列表项应用样式。这些元素当前仅应用了 li 样式，尽管（我相信）React 中更具体的 className 选择器具有下面在 SCSS 样式表中定义的样式。

下拉 React 组件的 SCSS，其中包含 li 元素

& .dropdownUl {
      margin: $boxMargin;
      padding: $stdPad;
      float: left;
      position: relative;
      & li {
        padding: $stdPad;
        box-sizing: content-box;
        @include standard-1px-border;
        position: absolute;
        background: $linear-gradient-azn-nfx;

        &:hover {
          cursor: pointer;
          background: $netflix-red;
          color: $netflix-white;
        }
        &:active {
          background: darken($netflix-red, 10%);
        }

        & .dropdownLiTwo {
          top: 200px;
          background: black;
        }
        & .dropdownLiThree {
          top: 400px;
          background: black;
        }
      }
    }
  }  
}

这是组件（下拉菜单）：

import React from "react";

export default class DropdownUlOne extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showListItems: false };
    this.handleMouseEnter = this.handleMouseEnter.bind(this);
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
  }

  handleMouseEnter(e) {
    e.preventDefault();
    this.setState({
      showListItems: true
    });
  }

  handleMouseLeave(e) {
    e.preventDefault();
    this.setState({ showListItems: false });
  }

  render() {
    if (this.state.showListItems) {
      return (
        <React.Fragment>
          <ul className="dropdownUl" onMouseLeave={this.handleMouseLeave}>
            <h2 className="hoverOn">Home</h2>
            <li className="dropdownLiOne">Blog</li>
            <li className="dropdownLiTwo">UI & UX</li>
            <li className="dropdownLiThree">What you can expect</li>
          </ul>
        </React.Fragment>
      );
    }
    return (
      <React.Fragment>
        <ul className="dropdownUl" onMouseEnter={this.handleMouseEnter}>
          <h2>Home</h2>
        </ul>
      </React.Fragment>
    );
  }
}

在导入了 scss 的 css 的这个组件中呈现：

import React from "react";
import "../styles/header.css";
import DropdownUlOne from "./dropdownUlOne";
import DropdownUlTwo from "./dropdownUlTwo";
import DropdownUlThree from "./dropdownUlThree";

export default class Header extends React.Component {
  render() {
    return (
      <header className="header">
        <h1 className="appTitle">Ronnlid Websites</h1>
        <div className="dropdownDiv">
          <DropdownUlOne />
          <DropdownUlTwo />
          <DropdownUlThree />
        </div>
      </header>
    );
  }
}

感谢您的帮助！

标签： javascripthtmlcssreactjssass

解决方案

我可能误解了你的问题。但是，我认为您在此处未应用 LI 样式的问题是因为&选择器就在它们之前，因此请尝试：

& .dropdownUl {
  margin: $boxMargin;
  padding: $stdPad;
  float: left;
  position: relative;
  li {
    padding: $stdPad;
    ....

现在，scss 的结构方式将 li 与您在 ul 上的类作为目标，如下所示：<li class="dropdownUl">

推荐阅读