#13 黑色边框的容器组件

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 所以这个系统是你一个人写的？一个个人？？？天呐

泠萱

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

dirstart

超简易的写法 js如下

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

css如下

.xxx>*{
border:1px solid #000;
}

heyunjiang

没有加 return 就错了

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

留恋阳光

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

yanming

最简单的解法！！！

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

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

mx

自己写的提交了未通过，参考大家的答案后，然后就通过了，还是大家比较厉害。
看了大家的代码后，发现大概有两种思路：
第一种思路：利用css的选择器为<BlackBorderContainer />组件的每个子元素添加边框，关键之处在于css选择器的使用，这种">"直接子选择器(>)与通配符选择器()一起使用的想法简直是厉害啊！！！
css:

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

js:

class BlackBorderContainer extends Component {
  /* TODO */
  render(){
    return(
      <div className = 'black-border'>
        {this.props.children}
      </div>
    )
  }
}

第二种思路就是利用普通的css类选择器，然后搭配循环遍历<BlackBorderContainer />中每个子元素的方法。
css:

.black-border{
  border:1px solid #000000;
}

js:

class BlackBorderContainer extends Component {
  /* TODO */
  render(){
    return(
      <div>
        {this.props.children.map((children, i) => {
          return(
            <div key = {i} className = 'black-border'>{children}</div>
          )
        })}
      </div>
    )
  }
}

Smile1k

@ScriptOJ 这里用this.props.children来遍历的话，假如BlackBorderContianer没有子节点，那this.props.children不就是undefined，遍历就报错了吧，是不是应该用React.Children来遍历啊。。

shyh5

@留恋阳光放在另一个组件调用的时候，key怎么设置，虽然能运行，但是控制台会报错。。

study-react

class BlackBorderContainer extends Component {
/* TODO */
constructor(){
super();
}
render(){
return(
<div>
{
this.props.children.map((child)=><div className="child">{child}</div>)
}
</div>
)
}
}

天堂

我觉得你们在样式都有问题，因为题目中只写明了样式div.name 和 p.age的样式有一层边框，但是你们的结果是，无论下面的children是否带样式，都会有一层边框，无论是map函数也好，还是.xxx>*{ border:1px solid #000000;}也好，结果都是这样的，只要是BlackBorderContainer 组件下的任意一children都会带边框的
所以我仍不明白如何才能只有div.name和p.age样式才会有边框，怎么写这个样式？

斐波拉契

@lanhan 没有key，控制台会有警告而已，可以加上

斐波拉契

@francis children是一个数组，里面有 div.name 和 p.age 两个HTML元素，用map更方便哦，实际使用也是一个技巧，不过这样写也是为了答题而写的。

zzc

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