#13 黑色边框的容器组件

[ScriptOJ]

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

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

最后的 div.name 和 p.age 都具有一层黑色边框（1px solid #000000）外层结构。

[francis]

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

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>
          )
        }
}

[ScriptOJ]

@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>)
  }
}

[francis]

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

[ScriptOJ]

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

嵌套结构的第一层

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

[francis]

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

[ScriptOJ]

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

[francis]

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

[ScriptOJ]

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

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

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

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

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

[francis]

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

[maicss]

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

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

[physihan]

.father>*{
  border:1px solid #000000;
}

class BlackBorderContainer extends Component {
 render(){
   return(
     <div className="father">
     {this.props.children}
     </div>
     )
 }
}

为什么这也能通过

[ScriptOJ]

@physihan 测试不够严谨的后果

[PARADISELIN]

@胡子大哈

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

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

[Carrey]

/* 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')
)

[ScriptOJ]

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

[yangqiang5156]

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

[ScriptOJ]

@yangqiang5156 Chrome

[chwech]

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>  
    )
  }
}

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

[lanhan]

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

[lanhan]

@ScriptOJ 所以这个系统是你一个人写的？ 一个 个 人？？？ 天呐