#4 用 React.js 组建的房子


  • 0
    administrators

    一个房子里面有一个房间和一个洗手间,房间里面有一个人和两条狗。

    请你完成组件:HouseRoomBathroomManDog,它们的最外层都用 div 标签包裹起来,类名分别为:houseroombathroommandog

    组件的实现应该具有上述的嵌套关系。


  • 0

    Dog组件我这样写,居然也通过了,但是应该有更好的办法实现吧,这样写也能通过实在太弱智了,两条狗直接<Dog />
    <Dog /> 了

    class House extends React.Component {
    	render(){
    		return (
    			<div className='house'>
    		      <Room />
    		      <Bathroom />
    		  </div>
    			)
    	}
    }
    
    class Room extends Component {
      render(){
    		return (
    			<div className='room'>
    				<Man />    
    				<Dog />    
    				<Dog />    
    		  </div>
    			)
    	}
    }
    
    class Bathroom extends Component {
       render(){
    		return (
    			<div className='bathroom'>  
    		    </div>
    			)
    	}
    }
    
    class Man extends Component {
      render(){
    		return (
    			<div className='man'>  
    		    </div>
    			)
    	}
    }
    
    class Dog extends Component {
    	render(){
    		return (
    			<div className='dog'>  
    		    </div>
    			)
    	}
    }
    

  • 0
    administrators

    @Hazel 这么写是对的,基础题。


  • 0

    /笑哭/笑哭/笑哭
    好吧


  • 0

    // Component 已经可以直接使用
    
    class House extends Component {
      render(){
        return(
          <div className="house">
            <Room/>
            <Bathroom/>
          </div>)
      }
    }
    
    class Room extends Component {
      render(){
        return (
          <div className="room">
            <Man/>
            <Dog/>
            <Dog/>
          </div>
          )
      }
    }
    
    class Bathroom extends Component {
      render(){
        return (
          <div className="bathroom">
            Bathroom
          </div>
          )
      }
    }
    
    class Man extends Component {
      render(){
        return (
          <div className="man">
            Man
          </div>
          )
      }
    }
    
    class Dog extends Component {
      render(){
        return (
          <div className="dog">
            Dog
          </div>
          )
      }
    }

  • 0

    class House extends Component {
    render() {
    return (
    <div>
    <h1>House</h1>
    <Room/>
    <Bathroom/>
    </div>
    );
    }
    }
    class Room extends Component {
    render() {
    return (
    <div>
    <h2>
    Room
    </h2>
    <Man/>
    <Dog/>
    </div>
    )
    }
    }

    class Bathroom extends Component {
    render() {
    return (
    <div>
    <h2> Bathroom</h2>
    </div>
    )
    }
    }
    class Man extends Component {
    render() {
    return (
    <h3>
    Man
    </h3>
    )
    }
    }
    class Dog extends Component {
    render() {
    return (
    <h3>
    <div>
    dog01
    </div>
    <div>
    dog02
    </div>
    </h3>
    )
    }
    }
    ReactDom.render(
    <House/>,
    document.getElementById('root')
    )


  • 0

    @ScriptOJ Dog 组件里面写两个狗的类名 不是更简单


  • 0

    class House extends Component {
      render() {
        return (
          <div>
            House
            <Room />
            <Bathroom />
          </div>
        )
      }
    }
    
    class Room extends Component {
      render() {
        return (
          <div>
            Room
            <Man />
            <Dog />
            <Dog />
          </div>
        )
      }
    }
    
    class Bathroom extends Component {
      render() {
        return (
          <div>Bathroom</div>
        )
      }
    }
    
    class Man extends Component {
      render() {
        return (
          <div>Man</div>
        )
      }
    }
    
    class Dog extends Component {
      render() {
        return (
          <div>Dog</div>
        )
      }
    }
    

  • 0

    class House extends Component {
    // TODO
    render() {
    return(
    <div className='house'>
    <Room />
    <Bathroom />
    </div>
    )
    }
    }

    class Room extends Component {
    // TODO
    render() {
    return(
    <div className='room'>
    <Man />
    <Dog />
    <Dog />
    </div>
    )
    }
    }

    class Bathroom extends Component {
    // TODO
    render() {
    return(
    <div className='bathroom'>
    this is a bathroom
    </div>
    )
    }
    }

    class Man extends Component {
    // TODO
    render(){
    return(
    <div className='man'>
    this is a man
    </div>
    )
    }
    }

    class Dog extends Component {
    // TODO
    render() {
    return(
    <div className='dog'>
    this is a dog
    </div>
    )
    }
    }


  • 0

    class House extends Component {

    render() {
    return (
    <div className = "house" >
    <Room />
    <Bathroom />
    </div>
    )
    }
    }

    class Room extends Component {

    render(){
    return (
    <div className = "room">
    <Man />
    <Dog />
    <Dog />
    </div>
    )
    }
    }

    class Bathroom extends Component {

    render(){
    return (
    <div className = "bathroom">
    </div>
    )
    }
    }

    class Man extends Component {

    render(){
    return (
    <div className = "man">
    </div>
    )
    }
    }

    class Dog extends Component {

    render(){
    return (
    <div className = "dog">
    </div>
    )
    }
    }


  • 0

    觉得测试可能有点问题:
    这么写可以,

    class House extends Component {
      render() {
        return (
          <div className="house">
            <Room/>
            <Bathroom/>
          </div>
        )
      }
    }
    
    class Room extends Component {
      render() {
        return <div className="room">
          <Man/>
          <Dog/>
          <Dog/>
        </div>
      }
    }
    

    但下面这种写法不行

    class House extends Component {
      render() {
        return (
          <div className="house">
            <Room>
              <Man/> 差异在这里
              <Dog/>
              <Dog/>
            </Room>
            <Bathroom/>
          </div>
        )
      }
    }
    
    class Room extends Component {
      render() {
        return <div className="room">{this.props.children}</div> 和这里
      }
    }
    

    不知道测试用例是怎么写的,但实际上下面这种写法更合理吧,Room里有什么不应该由Room组件自己决定,而应该由调用者决定


  • 0

    为什么要加 className 类名呢?不是很明白这个类名的用意.还希望能得到解答,谢谢您啦~


  • 0

    @agcaiyun 这只是出题者提的一种需求


  • 0

    @xieranmaya house里有一间房子和一个洗手间 那么你最好里面只写房子和洗手间,房子里有啥,洗手间里有啥,这些都写在相应的组件里把 别都写在house这个组件里


  • 0

    评论里面的代码怎么带颜色。。。。


  • 0

    
    class House extends Component {
      // TODO
      render(){
        let house ='house';
        return(<div className ={house}>house
           < Room/>
           < Bathroom/>
        </div>)
      }
       
       
       
    }
    
    class Room extends Component {
      // TODO
      render(){
         let room = 'room';
         return(<div className={room}>room
           < Man/>
          < Dog/>
          < Dog/>
         </div>)
      }
     
      
       
    }
    
    class Bathroom extends Component {
      // TODO
      render(){
         let bathroom = 'bathroom';
         return (<div className={bathroom}>bathroom
         </div>)
      }
    }
    
    class Man extends Component {
      // TODO
      render(){
         let man = 'man';
          return (<div className={man}>man</div>)
      }
    }
    
    class Dog extends Component {
      // TODO
      render(){
         let dog = 'dog';
          return (<div className={dog}>dog</div>)
      }
    }
    

  • 0

    @谢小文 利用md语法
    ```javascript
    这里写就会有的 你试试
    ```
    0_1512973179707_upload-b377228d-416d-4347-ba85-41cf301453c7


  • 0

    @millon 明白了 非常感谢


登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待