使元素的高度适应内部的内容

Question

我想为ReactJS 中的列表制作灰色背景。
问题是背景似乎有一个固定的高度，似乎小于内部的高度...
我以前从未遇到过这个问题，我发现背景尺寸大于元素的唯一方法是放置height: XXXpx，这不合适...
谁能解释我做错了什么？

这是我的课程文件：

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) 组合成一个非此即彼的场景：如果他们没有项目，则显示消息，如果有，则显示项目。