#13 黑色边框的容器组件
-
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怎么设置,虽然能运行,但是控制台会报错。。
-
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
-
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
.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