Here https://github.com/maifeeulasad/StackOverFlow-Share/tree/react.js-partial-render-problem是完整的项目,我创建了一个带有最少 CSS 的新项目,并且没有我创建的 CSS。结果是一样的。
这是我的代码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;
但问题是,当数量很少的时候ClassRoomUnit
项目,它正确呈现:
但当我添加更多时ClassRoomUnit
,第一部分和许多项目消失,尽管滚动条仍然存在:
How this can be solved ?
一定有一些CSS,一些类导致了这个问题。你能分叉我的示例 stackblitz,对你的代码进行更改,看看我们是否可以复制这里的情况 - 如果我们都可以看到效果,那么帮助会更容易。
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 堆栈闪电战在这里 https://stackblitz.com/edit/react-aasxu2
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)