react,js component rendering partially

问题

Here is the full project, I have created a new project with minimal CSS and no CSS created by me. And the result is same.

Here is code of my Home class :

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;

But the problem is, when there is only very few ClassRoomUnit item, it renders correctly :

But when I add a lot more ClassRoomUnit, first portion and many item disappears, although the scrollbar remains :

How this can be solved ?

回答1:

there must be some CSS, some class which is causing this for you. Can you fork my example stackblitz, make changes from your code to see if we can replicate the case here - it is much easier to help if we can all see the effects.

My index.js code:

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

working stackblitz here

回答2:

I saw this beautiful floating label example. And directly copy pasted the used .css file.

Maybe for these few lines :

html,
body {
   height: 100%;
}

It created all these problem, now I have moved all the rest css to another css file except this one, and my pages are rendering fully.

Till now, thanks to all those guys, who gave their valuable time on my question. It was really a headache for me, I had to change my templates. Which is really hard.

Thanks.

来源：https://stackoverflow.com/questions/57735934/react-js-component-rendering-partially