<div id="app"></div>
body {
  padding: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.house {
  border: 2px solid #90f;
  padding: 5px;
  display: flex;
}
.room {
  border: 1px solid red;
  padding: 5px;
  margin: 5px;
}
.bathroom {
  border: 1px solid green;
  padding: 5px;
  margin: 5px;
}
.man {
  border: 1px solid lime;
  padding: 5px;
  margin-bottom: 5px;
}
.dog {
  padding: 5px;
  border: 1px solid orange;
  margin-bottom: 5px;
}
View Compiled
// 一个房子里面有一个房间和一个洗手间,房间里面有一个人和两条狗
// 请你完成组件: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

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js