#13 黑色边框的容器组件


  • 1

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


  • 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?


  • 0

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


  • 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怎么设置,虽然能运行,但是控制台会报错。。


登录后回复
 

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