I was the first to read the react document and decided to write a small demo. Floor effect.
This demo deliberately split the entire component into several small components. The purpose is to train your understanding of react components and the ability to transfer parameters between components. Put it in the project
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="app"></div>
</div>
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<!-- 加载我们的 React 组件。-->
<script src="index.js" type="text/babel"></script>
</body>
</html>
css code
.menuList{
margin-bottom:20px;
position: fixed;
top:0;
left:0
}
.menuList>span{
text-align: center;
font-size: 16px;
display: inline-block;
margin-right:10px;
cursor: pointer;
}
.menuList>span.active{
color:red;
}
.container{
min-height: 200px;
}
.container>.building{
height:100vh
}
.container>div{
background: aquamarine;
}
js code
var btl;
class Area extends React.Component {
constructor(props) {
super(props);
this.state={
len:'',buildingIndex: "",buildingTopList:""}
}
componentDidMount(){
}
getLen = (len) => {
this.setState({
len})
};
getIndex =(index)=>{
this.setState({
buildingIndex:index})
};
buildingTopList=(buildingTopList)=>{
this.setState({
buildingTopList})
console.log(this.state.buildingTopList)
}
render() {
// this.setState({buildingTopList: this.props.buildingTopList})
console.log(this.state.buildingTopList)
var building = document.getElementsByClassName("building")
for(var i=0;i<building.length;i++){
console.log(building[i].scrollTop)
}
return (
<div>
<MenuList getLen={
this.getLen} getIndex = {
this.getIndex} btl={
this.state.buildingTopList}></MenuList>
<Container Len={
this.state.len} buildingIndex={
this.state.buildingIndex} buildingTopList={
this.buildingTopList} />
</div>
)
}
}
class Container extends React.Component{
constructor(props) {
super(props);
this.state = {
buildingScrollTop:[],buildingIndex:props.buildingIndex}
}
componentDidMount(){
setTimeout(()=>{
var building = document.getElementsByClassName("building")
console.log(building.length)
var buildingScrollTop=[]
for(var i=0;i<building.length;i++){
buildingScrollTop.push(building[i].offsetTop)
}
this.setState({
buildingScrollTop})
this.props.buildingTopList(this.state.buildingScrollTop);
},100)
}
render() {
window.scrollTo({
behavior:"smooth",
top:this.state.buildingScrollTop[this.props.buildingIndex]
})
var num = this.props.Len
console.log(num)
var a= []
for(var i=0;i<num;i++){
a.push(<div className={
'building'} key={
i.toString()}>楼层{
i}</div>)
}
return (
<div>
<div className={
'container'}>{
a}</div>
</div>)
}
}
class MenuList extends React.Component {
constructor(props) {
super(props);
this.spanClick==this.spanClick.bind(this)
this.windowScroll = this.windowScroll.bind(this)
this.state = {
list: [{
name:"楼层0"},{
name:"楼层1"},{
name:"楼层2"},{
name:"楼层3"}],
activeSpan:0,
btl:this.props.btl,
addL:false
}
btl= this.props.btl
}
componentDidMount(){
console.log("mount")
this.props.getLen(this.state.list.length);
}
componentWillUnmount(){
}
windowScroll(){
this.setState({
addL: true})
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
var btl = this.props.btl
btl.map((item,index)=>{
if(scrollTop>=item){
this.setState({
activeSpan:index})
}
})
}
spanClick(index){
this.setState({
activeSpan: index})
this.props.getIndex(index)
}
render() {
if(this.props.btl&&this.state.addL===false){
window.addEventListener("scroll",this.windowScroll)
}
var list = this.state.list
var menu = list.map((item,index) => <span onClick={
this.spanClick.bind(this,index)} className={
this.state.activeSpan===index?"active":null} key={
index.toString()}>{
item.name}</span>)
return (
<div className={
"menuList"}>
{
menu}
</div>
)
}
}
ReactDOM.render(
<Area/>,
document.getElementById("app")
)
Novice practice simple hands do not spray