src结构
assets中存放图片等components中存放各个component—-Person等container中存放App.js等
尽可能减少App.js中render的逻辑和return的JSX；
建立Cockpit component 和 persons component；将逻辑放入其中；
render(){
let person
=null;
if(this.state
.isshow
){
person
=
<Persons
persons
={this.state
.persons
}
clicked
={this.deletePersonHandler
}
changed
={this.nameChangedHandler
}/>;
}
return (
<div className
={Cssclasses
.App
}>
<Cockpit
showPersons
={this.isshow
}
persons
={this.state
.persons
}
clicked
={this.clicktoshow
}/>
{person
}
</div
>
);};
cockpit.js
import React
from 'react';
import Cssclasses
from './Cockpit.module.css';
const cockpit =(props
)=>{
const classes
=[];
let btnClass
='';
if(props
.showPersons
){
btnClass
= Cssclasses
.Red
;
}
if(props
.persons
.length
<=2){
classes
.push(Cssclasses
.red
);
}
if(props
.persons
.length
<=1){
classes
.push(Cssclasses
.bold
);
}
return (
<div className
={Cssclasses
.Cockpit
}>
<h1
>Hi i am a React App
!</h1
>
<p className
={classes
.join(' ')}>It is working
!</p
>
<button
className
={btnClass
}
onClick
={props
.clicked
}>Switch name
</button
>
</div
>
);
};
export default cockpit
;
persons.js
import React
from 'react';
import Person
from './Person/person'
const persons = (props
)=> props
.persons
.map((person
,index
)=>{
return ( <Person
name
={person
.name
}
age
={person
.age
}
click
={()=>props
.clicked(index
)}
key
={person
.id
}
changed
={(event
)=>props
.changed(event
,person
.id
)}
/>
)
});
export default persons
;
