#13 黑色边框的容器组件


  • 0

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

  • -1

    超简易的写法 js如下

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

    css如下

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

  • 0

    没有加 return 就错了

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

  • 0

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

  • -2

    最简单的解法!!!

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

  • 3

    自己写的提交了未通过,参考大家的答案后,然后就通过了,还是大家比较厉害。
    看了大家的代码后,发现大概有两种思路:
    第一种思路:利用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>
        )
      }
    }
    

  • 0

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


  • 0

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


  • 0

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


  • 0

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


  • 0

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


  • 0

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


  • 0

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

  • 0

    .blackBorder{
      border:  1px solid black;
    }
    
    class BlackBorderContainer extends Component {
      render(){
        return(
          <div>
          {this.props.children.map((item)=>{
              return(
              <div className = 'blackBorder'>
                {item}
              </div>)
            })}
          </div>
          )
      }
    }
    

  • 0

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


  • 0

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


  • 0

    0_1526027754585_upload-ad5d810c-21b6-4644-b77c-bac183547cdf


  • 0

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

  • 0

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

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

  • 0

    class BlackBorderContainer extends Component {
    render(){
    return(
    <div>
    {
    this.props.children.map((el)=>{
    return(
    <div style={{border: '1px solid #000'}}>{el}</div>
    )
    })
    }
    </div>
    )
    }
    }


登录后回复
 

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