IT技术 - react,js组件部分渲染 - 吾爱随笔录

react,js组件部分渲染

IT技术 html css reactjs bootstrap-4

2022-08-01 00:15:15

这是完整的项目，我用最少的 CSS 创建了一个新项目，没有我创建的 CSS。结果是一样的。

这是我Homeclass的代码：

class Home extends React.Component{
state={};
render() {
    return (
        <div>
            <div className="container">

                <h1>Assignment Submission System</h1>
                <p className="lead">To get latest notification, click
                    <tab>
                        <Link to={"/notifications"}>
                            here
                        </Link>
                    </tab>
                    .
                </p>
                <p>All enrolled class-rooms, assignment to-do list are shown.</p>

                <h2 className="mt-4">Class-rooms:</h2>
                <ClassRoomUnit displayName={"class 1"} classID={"4324ax"} hLink={"/class/asd"}/>
                <ClassRoomUnit displayName={"class 2"} classID={"4324ax"} hLink={"/class/xzx"}/>
                <ClassRoomUnit displayName={"class 3"} classID={"4324ax"} hLink={"/class/asd"}/>
                <ClassRoomUnit displayName={"class 4"} classID={"4324ax"} hLink={"/class/asd"}/>
            </div>

        </div>
    );

}
}
export default Home;

但问题是，当只有很少的ClassRoomUnit项目时，它会正确呈现：

但是当我添加更多时ClassRoomUnit，第一部分和许多项目消失了，尽管滚动条仍然存在：

如何解决？

2个回答

一定有一些 CSS，一些类会为你造成这种情况。您能否 fork 我的示例 stackblitz，从您的代码中进行更改，看看我们是否可以在此处复制该案例 - 如果我们都能看到效果，那么提供帮助会容易得多。

我的index.js代码：

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class ClassRoomUnit extends React.Component {
  constructor(props) {
    super(props);
    this.state = { displayName: this.props.displayName, classID: this.props.classID, hLink: this.props.hLink }
  }
  render() {
    return (<div class='row'>
      <div class='col-4 themed-grid-col'>  {this.state.displayName} </div>
      <div class='col-4 themed-grid-col'>  {this.state.classID} </div>
      <div class='col-4 themed-grid-col'> <a href={this.state.hLink}>Go to class room</a> </div>
    </div>)
  }
}

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div>
        <div className="container">

          <h1>Assignment Submission System</h1>
          <p className="lead">To get latest notification, click here
              .
                </p>
          <p>All enrolled class-rooms, assignment to-do list are shown.</p>

          <h2 className="mt-4">Class-rooms:</h2>
          <ClassRoomUnit displayName={"class 1"} classID={"4324ax"} hLink={"/class/asd"} />
          <ClassRoomUnit displayName={"class 2"} classID={"4324ax"} hLink={"/class/xzx"} />
          <ClassRoomUnit displayName={"class 3"} classID={"4324ax"} hLink={"/class/asd"} />
          <ClassRoomUnit displayName={"class 4"} classID={"4324ax"} hLink={"/class/asd"} />

          <ClassRoomUnit displayName={"class 5"} classID={"4324ax"} hLink={"/class/asd"} />
          <ClassRoomUnit displayName={"class 6"} classID={"4324ax"} hLink={"/class/xzx"} />
          <ClassRoomUnit displayName={"class 7"} classID={"4324ax"} hLink={"/class/asd"} />
          <ClassRoomUnit displayName={"class 8"} classID={"4324ax"} hLink={"/class/asd"} />

          <ClassRoomUnit displayName={"class 9"} classID={"4324ax"} hLink={"/class/asd"} />
          <ClassRoomUnit displayName={"class 10"} classID={"4324ax"} hLink={"/class/xzx"} />
          <ClassRoomUnit displayName={"class 11"} classID={"4324ax"} hLink={"/class/asd"} />
          <ClassRoomUnit displayName={"class 12"} classID={"4324ax"} hLink={"/class/asd"} />

          <ClassRoomUnit displayName={"class 13"} classID={"4324ax"} hLink={"/class/asd"} />
          <ClassRoomUnit displayName={"class 14"} classID={"4324ax"} hLink={"/class/xzx"} />
          <ClassRoomUnit displayName={"class 15"} classID={"4324ax"} hLink={"/class/asd"} />
          <ClassRoomUnit displayName={"class 16"} classID={"4324ax"} hLink={"/class/asd"} />

        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

在这里工作stackblitz

我看到了这个漂亮的浮动标签示例。并直接复制粘贴使用过的 .css文件。

也许对于这几行：

html,
body {
   height: 100%;
}

它造成了所有这些问题，现在我已将所有其余的 css 移至除此之外的另一个 css 文件，并且我的页面正在完全呈现。

到目前为止，感谢所有为我的问题付出宝贵时间的人。这对我来说真的很头疼，我不得不改变我的模板。这真的很难。

谢谢。

其它你可能感兴趣的问题

上一篇在 Vercel 上部署后，图像未加载到 Next.js 应用程序中下一篇文件上传到react中的自定义文件夹