// 一个房子里面有一个房间和一个洗手间,房间里面有一个人和两条狗
// 请你完成组件:House,Room,Bathroom,Man,Dog,
// 它们的最外层都用 div 标签包裹起来,类名分别为:house,room,bathroom,man,dog
// 组件的实现应该具有上述的嵌套关系
// 创建House组件, House组件包括Room、Bathroom两个组件
class House extends React.Component {
render() {
return (
<div className='house'>
<Room />
<Bathroom />
</div>
)
}
}
// 创建Room组件,房间里有一个人和两只狗
class Room extends React.Component {
render() {
return (
<div className='room'>
<Man />
<Dog />
<Dog />
</div>
)
}
}
// 创建Bathroom组件
class Bathroom extends React.Component {
render() {
return (
<div className='bathroom'>
<h1>This is bathroom</h1>
</div>
)
}
}
// 创建Man组件
class Man extends React.Component {
render () {
return (
<div className='man'>
<h1>This is Man</h1>
</div>
)
}
}
// 创建Dog组件
class Dog extends React.Component {
render () {
return (
<div className='dog'>
<h1>This is dog</h1>
</div>
)
}
}
ReactDOM.render(
<House />,
document.getElementById('app')
)
View Compiled