#13 黑色边框的容器组件

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

fengzi2016

.blackBorder{
  border:  1px solid black;
}

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

Mz

@chwech 嵌入的内容数组应该没有给定的长度，所以没有全部遍历完

x1nG

@ScriptOJ 您好，为什么复制你这个答案去提交报错SyntaxError: Invalid or unexpected token，在浏览器中自己运行没报错。

821453366

cjf

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

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

chenqunxiong

@ScriptOJ 我觉得您这个例子有一点问题，并且是教程中也没有说明的一个问题：当组件作为双标签使用，并且传入的子级标签或者组件只有一个而不是多个的时候，props.children 不是一个只有一个元素的数组而是一个单个的元素，所以map方法会抛出异常。

[{element},{element2}].map    //fine
[{element}].map               //fine  可是一个元素的时候不是这样，是下面这样 
{element}.map                 //throw error