Question

学习React.js框架，并需要一些样式指示。 CSS不是我的强项。

如何在中间设置静态内容div的样式，并使其只能在div内滚动？

没有样式：

https://i.imgur.com/26wNAfH.jpg

如何设置样式？

https://i.imgur.com/c5nYCOz.jpg

这是滚动功能：

https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/part%202.mp4

app.css

.name {
  font-weight: bold;
  font-size: 20px;
}
.centered {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}
.center {
  position: fixed;
  width: 500px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-top: -100px; /* Negative half of height. */
  margin-left: -250px; /* Negative half of width. */
}

.content {
  text-align: center;
  border: 2px solid grey;
  border-radius: 5px;
  position: fixed;
  /* center the div */
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  /* give it dimensions */
  min-height: 10em;
  width: 90%;
  /* just for example presentation */
  top: 5em;
  background-color: white;
}

输出：https://i.imgur.com/Eyv6hab.png

HTML：

import React, { Component } from "react";
import "../App.css";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";

const API = "https://www.hatchways.io/api/assessment/students";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      students: [],
      isLoading: false,
      error: null
    };
  }

  componentDidMount() {
    this.setState({ isLoading: true });
    fetch(API)
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error("Something went wrong ...");
        }
      })
      .then(data =>
        this.setState({ students: data.students, isLoading: false })
      )
      .catch(error => this.setState({ error, isLoading: false }));
  }

  render() {
    const { students, isLoading, error } = this.state;

    if (error) {
      return <p>{error.message}</p>;
    }

    if (isLoading) {
      return <p>Loading ...</p>;
    }

    return (
      <body>
        <div className="content">
          <div>
            {students.map(student => (
              <div key={student.id}>
                <p>
                  <img src={student.pic} />
                </p>
                <p className="name">
                  {student.firstName} {student.lastName}
                </p>
                <p>Email: {student.email}</p>
                <p>Company: {student.company}</p>
                <p> Skill: {student.skill}</p>
                <p>Average: {student.grades}</p>
              </div>
            ))}
          </div>
        </div>

        {/* <div class="card mb-3">
          {students.map(student => (
            <div class="row no-gutters">
              <div class="col-md-4">
                <img src={student.pic} class="card-img" alt="..." />
              </div>
              <div class="col-md-8">
                <div class="card-body">
                  <h5 class="card-title">
                    {student.firstName} {student.lastName}
                  </h5>
                  <p class="card-text">
                    <p>Email: {student.email}</p>
                    <p>Company: {student.company}</p>
                    <p> Skill: {student.skill}</p>
                    <p>Average: {student.grades}</p>
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div> */}
      </body>


    );
  }
}

export default App;

Answer 1

这可能不会帮助我不熟悉该JS框架。我之所以发布此帖子，是因为没人回答，也许可以帮上忙。

<style>    
    scroll
{
    max-height: 400px;
    overflow-y: scroll;
}
</style>

<div class="scroll">

如何使内容div可滚动？ React和CSS

1 个答案: