#13 黑色边框的容器组件


  • 0

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


  • 0

    function BlackBorderContainer(props) {
      const style = {border: '1px solid #000'}
      return (
        <div>
        {props.children.map(child => {
          return <div style={style}>{child}</div>;
        })}
        </div>
      )
    }
    

  • 0

    测试通过来看看大家的思路,看了一遍,还真没有跟我一样的;看来只有我完全按题主要求的写的,贴上来:

    .name,.age{border:1px solid #000000}
    
    class BlackBorderContainer extends Component {
      render(){
        return(
          <div>{
            this.props.children.map((value,index)=>{
              if(index % 2 === 0){
                return <div key={index} className='name'>{value}</div>
              }else{
                return <p key={index} className='age'>{value}</p>
              }
            })
            }
          </div>
        )
      }
    }
    

    一开始也想到用map方法遍历了,只是为了区别开nameage加了个判断


  • 0

    @liuqq 这个代码局限性太大了,如果要添加一个sex呢,肯定不能再写一个判断的


  • 0

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

  • 0

    @ScriptOJ 推荐给朋友们了,现在坐等教程!!


  • 0

    css

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

    js

    class BlackBorderContainer extends Component {
      render() {
        return (
          <div>
            {React.Children.map(this.props.children, child => 
              <div className="black-border">
                {child}
              </div>
            )}
          </div>
        );
      }
    }
    

  • 0

    我也贴一下

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

  • 0

    class BlackBorderContainer extends Component {
      render() {
        let children = this.props.children.map((item, index) => {
          return React.cloneElement(item, {
            className: item.props.className + " blackBorder",
          })
        })
        return <div>{children}</div>
      }
    }
    

  • 0

    0_1540779473545_upload-7281ca24-e39b-4fc2-a97e-7395e57db5ae


  • 0

    @天堂 使用.xxx > * 选择器只有直接子元素会被选择到,所以只有p和div有样式


  • 0

    @maicss 你的map没有return...


  • 0

    @maicss 用一个DIV 把 children包裹起来就行了


  • 0

    @ScriptOJ 嵌套一层div就改变了原来的结构了,比如就是想用p标签,不要<div><p></p></div>,怎么办


  • 0

    考虑到没有插入子组件的情况,以及只有一个子组件时this.props.children是对象不是数组

    class BlackBorderContainer extends Component {
        /* TODO */
        render() {
            return (
                <div>
                    {typeof(this.props.children) === 'Object'
                        ? this
                            .props
                            .children
                            .map(child => (
                                <div className="black">{child}</div>
                            ))
                        : (
                            <div className="black">{this.props.children}</div>
                        )}
                </div>
            );
        }
    }
    

  • 0

    css:

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

    js:

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

  • 0

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

  • 0

    /* 你也许会需要样式 */
    .blackBorder > *{
      border: 1px solid #000000;
    }
    
    class BlackBorderContainer extends Component {
      /* TODO */
      render(){
        return (
          <div className="blackBorder">
            {this.props.children}
          </div>
        )
      }
    }
    
    

  • 0

    @maicss 不是要在外边包裹一层吗?


登录后回复
 

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