#13 黑色边框的容器组件


  • 0
    administrators

    实现一个组件 BlackBorderContianer,它会把作为它的嵌套结构的 每个直接子元素 都用一个黑色边框的 div 包裹起来。例如:

    <BlackBorderContainer>
      <div className='name'>My Name:Lucy</div>
      <p className='age'>
        My Age:<span>12</span>
      </p>
    </BlackBorderContainer>
    

    最后的 div.namep.age 都具有一层黑色边框(1px solid #000000)外层结构。


  • 0

    @胡子大哈 这个 一直提示“嵌套的子元素没有正确渲染” 能不能给下正确答案

    css:
    .name{
      border:1px solid #000000
    }
    .age{
      border:1px solid #000000
    }
    div.divChid{
      border:1px solid #000000
    }
    js:
    class BlackBorderContainer extends Component {
      render(){
              return (
               <div className="divChid">{this.props.children[2]}</div>
              )
            }
    }
    

  • 0
    administrators

    @francis

    CSS:

    .border {
      border: 1px solid #000;
    }
    

    JS:

    class BlackBorderContainer extends Component {
      render () {
        return (<div>{this.props.children.map((el) => {
          return (
            <div className='border'>{el}</div>
          )
        })}</div>)
      }
    }
    

  • 0

    @胡子大哈 谢谢 但是为什么 这块要循环childre?不是 “把作为它的嵌套结构的第一层的内容都用一个黑色边框的 div 包裹起来” 吗


  • 0
    administrators

    @francis#13 黑色边框的容器组件 中说:

    嵌套结构的第一层

    嵌套结构的第一层 指的是第一层的直接子元素,这里表述上可能有问题。我修改一下。


  • 0

    @胡子大哈 奥奥 好的 谢谢啦 还有我想请问下那个这个答案的评测 你是用什么开发的?感觉很智能


  • 0
    administrators

    @francis 你说的是这套系统的评测,还是这道题的评测呢?😁


  • 0

    @胡子大哈 这个系统的测评


  • 1
    administrators

    @francis 这个问题问得非常好啊,我一直希望有人问这个问题。哈哈。

    这个系统的后台是用 Node.js 写的,但是评测的时候会把代码放到一个浏览器里面执行,运行的时候除了会执行你的代码也会执行相应的测试用例。这个跟我们平时的写业务的时候写的测试有点类似。

    所以说起来也很简单,就是 Node.js + 浏览器 + 代码执行 + 测试用例。

    但实际上也有点复杂,因为要处理很多情况。例如死循环检测、依赖引入、浏览器进程管理等等。这些细节有兴趣我以后会写篇博客讨论写。

    玩的不错可以向朋友推荐下哈 😄,有什么意见建议也可以提。


  • 0

    @胡子大哈 奥奥 了解了 厉害 以后得多请教你问题 哈哈, 已推荐!


  • 0

    class BlackBorderContainer extends Component {
      render() {
        return (
          <div>
          {this.props.children.map((child) => {child.className += 'border'})}
          </div>
          )
      }
    }
    

    唉,这样不行啊,我想太多


  • 0

    .father>*{
      border:1px solid #000000;
    }
    
    class BlackBorderContainer extends Component {
     render(){
       return(
         <div className="father">
         {this.props.children}
         </div>
         )
     }
    }
    

    为什么这也能通过


  • 0
    administrators

    @physihan 测试不够严谨的后果


  • 0

    @胡子大哈

    这些细节有兴趣我以后会写篇博客讨论写。

    哈哈哈 非常有兴趣啊 对测试根本没什么概念希望大神能普及一下


  • 0

    /* css */
    .sidebar{
      border: 1px solid #000;
    }
    
    /* js */
    class BlackBorderContainer extends Component {
    	render(){
    		return(
    			<div className="card">
    				<div className="card-content">
    					<div className='sidebar'>
    			          {this.props.children[0]}
    			        </div>
    			        <div className='sidebar'>
    			          {this.props.children[1]}
    			          {this.props.children[2]}
    			        </div>
    				</div>			
    			</div>	
    		)
    	}
    }
    class Card extends Component {
      render () {
        return (
        <div>
        	<BlackBorderContainer>
    		  <div className='name'>My Name:Lucy</div>
    		  <p className='age'>
    		    My Age:<span>12</span>
    		  </p>
    		</BlackBorderContainer>
    
        </div>
        )
      }
    }
    ReactDOM.render(
    	<Card />,
    	document.getElementById('root')
    )
    

  • 1
    administrators

    @Carrey 代码样式可以用 markdown 的 ``` 包裹起来


  • 0

    @ScriptOJ Node.js + 浏览器 +代码执行 +测试用例 中的浏览器用的是什么工具?PhantomJS 还是 Nightmare 或是其他?


  • 0
    administrators


  • 0

    border {
      border: 1px solid #000;
    }
    
    class BlackBorderContainer extends Component {
      /* TODO */
      render () {
        return (
          <div>
            <div className="border">{this.props.children[0]}</div>
            <div className="border">{this.props.children[1]}</div>
          </div>  
        )
      }
    }
    

    请问为什么这样写不能通过?报未正确渲染子元素


  • 0

    @ScriptOJ 这里在map 遍历的时候,是不是少了个key?


登录后回复
 

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