Question

这是我的一个组件的渲染方法：

  render() {
    return (
      <div className="left col-xs-12 col-md-6">
        <Dropdown show={this.state.showDropdown}/>
        {this.props.children}
      </div>
    );
  }

这只是一个带全屏下拉菜单的div，还有一些孩子。 showDropdown===true时，会显示下拉菜单。现在，在使用此组件的其中一个页面中，直接子项在格式化方面存在一些问题，因此我添加了padding: 50px。这解决了这个问题。但是现在我的Dropdown组件也会获得50px的填充，这会降低我的Dropdown菜单项并破坏Dropdown的格式 - 但我不知道为什么？这是正常的行为吗？

父母的CSS：

.left {
  display: flex;
  justify-content: center;
  align-items: center;

  // background-color: MediumSpringGreen;
  background-color: $color_left;

  height: auto;
  min-height: 100vh;

  z-index: 1;
  @include media-breakpoint-up(md) {
    height: 100vh;
  }
}

儿童代码

render() {
  return (
    <div className="row">
    <Loader show={this.state.loading} />
    <Left> 
      <div className="about_padding">
        <p className="red big-box-text-two">Text text text</p>
        <a className="menu-link statementbox" id="menu-statement" href="./pdf/statement.pdf" download="statement.pdf">
          <p className="menu-link-text">our statement</p>
          <img className="img-fluid download-img" src={imgDownload} alt="download"></img>
        </a>
      </div>
    </Left>
}

孩子的CSS：

.statementbox {
  margin-top: 20px !important;
}

.about_padding {
  padding-left: 15%;
  padding-right: 15%;
  //I was trying to add padding-top here, but it also pushes down my Dropdown

  @include media-breakpoint-down(xs) {
    padding-left: 10%;
    padding-right: 10%;
  }
}

下拉代码：

const Dropdown = ({show}) => 
<div className="dropdown"
style={{
        visibility: show ? "visible" : "hidden",
        opacity: show ? 1 : 0
        }}>
  <Link to="/">Home</Link>
  <Link to="/menus/">Menus</Link>
  <Link to="/about/">About us</Link>
  <Link to="/contact/">Contact</Link>
</div>

下拉列表的CSS：

.dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  font-size: 40px; 
  background-color: #FFD826; 
  position: absolute;
  height: 100%; 
  width: 100%;
  z-index: 2;

  a {
    color: #f42528 !important; 
  }
}

React：子组件div也适用于兄弟。为什么呢？

0 个答案: