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>
    );
  }
}

这希望通过捕获我的理解来解决您的一次性问题：

如果未加载...
显示“创建新项目”项
如果他们还没有任何项目，请向他们显示一条消息
如果他们确实有项目，则为每个项目创建一个新元素

值得考虑的是，是否可以将projectsNumber替换为projects.length。如果是这样，您可能可以将上述（2）和（3）组合为一个或非方案：如果他们没有项目，请显示一条消息，如果有，请显示项目。

使元素的高度适应内部

1 个答案: