#13 黑色边框的容器组件


  • 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 ;
    }
    
    

登录后回复
 

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