#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组件自己决定,而应该由调用者决定


登录后回复
 

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