使元素的高度適應內部的內容

Question

我想為ReactJS中的列表制作灰色背景。
問題是背景似乎有一個固定的高度，似乎小於內部的高度......
我以前從未遇到過這個問題，我發現背景尺寸大於元素的唯一方法是放置height: XXXpx ，這不合適......
有人可以解釋我做錯了什么嗎？

這是我的 class 文件：

import React, { Component } from "react";
import { ListGroupItem } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";
import { API } from "aws-amplify";

import "./ProjectList.css";

export default class ProjectList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: true,
      projects: [],
      reducedView: true,
      projectsNumber: 1000,
      numberOfElementsToDisplay: 1000
    };
  }

  async componentDidMount() {
    try {
      const projects = await this.projects();
      console.log(projects)
      this.setState({ projects });
    } catch (e) {
      alert(e);
    }

    this.setState({ isLoading: false });
  }

  projects() {
    return API.get("economics-endpoint", "/list");
  }

  handleClick(e) {
    this.setState({ reducedView: false });
    e.preventDefault();
  }

  renderNotesList(projects) {
    return [{}].concat(projects).map(
      (note, i) => {
        if(i !== 0){
            if((this.state.reducedView && i <= this.state.numberOfElementsToDisplay) || !this.state.reducedView){
              return(
                <div className="element">
                  <ListGroupItem className="mainContainer">
                    <div>
                      ProjectName#{i}
                    </div>
                  </ListGroupItem>
                </div>
              );
            }
        }
        else{
          if(this.state.projectsNumber === 0){
            return(
              <div className="element">
                <LinkContainer to={`/econx/new`}>
                  <ListGroupItem className="new">
                    <div>
                      + Create New Project
                    </div>
                  </ListGroupItem>
                </LinkContainer>
                <div className="errorMessage">
                  You don't have any existing project yet.
                </div>
              </div>
              );
          }
          else{
            return(
              <div className="element">
                <LinkContainer to={`/econx/new`}>
                  <ListGroupItem className="new">
                    <div>
                      + Create New Project
                    </div>
                  </ListGroupItem>
                </LinkContainer>
              </div>
            );
          }
        }
      }
    );
  }

  render() {
    return (
      <div className="ProjectList">
        <div className="projects">
          {!this.state.isLoading &&
                this.renderNotesList(this.state.projects)}
        </div>
      </div>
    );
  }
}

還有我的 css 文件：

.ProjectList .notes h4 {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  overflow: hidden;
  line-height: 1.5;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.projects{
  background-color: #E0E0E0;
  border-radius: 10px;
  padding: 1%;
}

.list-group-item{
  margin-bottom: 3px;
  padding: 0px;
  line-height: 200px;
  text-align: center;
  vertical-align: middle;
  border-radius: 6px;
  padding-bottom: 50px;
}

.list-group-item:first-child{
  padding: 0px;
  border-radius: 6px;
}

.list-group-item:hover{
  vertical-align: baseline;
}

.element{
  width: 20%;
  float: left;
  padding: 0% 1% 1% 1%;
}

Answer 1

這不能回答您的 CSS 問題。 不過，我確實對 JavaScript 有一些想法。 我將提供我的重構供您考慮。 希望我正確解釋了您的原始邏輯：

import React, { Component } from "react";
import { ListGroupItem } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";
import { API } from "aws-amplify";

import "./ProjectList.css";

export default class ProjectList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: true,
      projects: [],
      reducedView: true,
      projectsNumber: 1000,
      numberOfElementsToDisplay: 1000
    };
  }

  async componentDidMount() {
    try {
      const projects = await this.fetchProjects();
      console.log(projects);
      this.setState({ projects });
    } catch (e) {
      alert(e);
    } finally {
      this.setState({ isLoading: false });
    }
  }

  fetchProjects = () => {
    return API.get("economics-endpoint", "/list");
  };

  handleClick = e => {
    e.preventDefault();
    this.setState({ reducedView: false });
  };

  render() {
    const {
      isLoading,
      numberOfElementsToDisplay,
      projectsNumber,
      reducedView
    } = this.state;

    const projects = reducedView
      ? this.state.projects.slice(0, numberOfElementsToDisplay)
      : this.state.projects;

    return (
      <div className="ProjectList">
        <div className="projects">
          {!isLoading && (
            <React.Fragment>
              <div className="element">
                <LinkContainer to={`/econx/new`}>
                  <ListGroupItem className="new">
                    <div>+ Create New Project</div>
                  </ListGroupItem>
                </LinkContainer>
                {projectsNumber === 0 && (
                  <div className="errorMessage">
                    You don't have any existing projects yet.
                  </div>
                )}
              </div>
              {projects.map((project, index) => (
                <div className="element">
                  <ListGroupItem className="mainContainer">
                    <div>ProjectName#{index}</div>
                  </ListGroupItem>
                </div>;
              ))}
            </React.Fragment>
          )}
        </div>
      </div>
    );
  }
}

這通過希望捕捉到我理解的你的意圖來解決你的一對一問題：

1. 如果沒有加載...
2. 顯示“創建新項目”項
3. 如果他們還沒有任何項目，請向他們顯示消息
4. 如果他們確實有項目，請為每個項目創建一個新元素

值得考慮是否可以將您的projectsNumber替換為projects.length 。 如果是這樣，您可能可以將上面的 (2) 和 (3) 組合成一個非此即彼的方案：如果他們沒有項目，則顯示一條消息，如果有，則顯示項目。