#13 黑色边框的容器组件
-
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
@Carrey 代码样式可以用 markdown 的 ``` 包裹起来
-
0
@ScriptOJ Node.js + 浏览器 +代码执行 +测试用例 中的浏览器用的是什么工具?PhantomJS 还是 Nightmare 或是其他?
-
0
@yangqiang5156 Chrome
-
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怎么设置,虽然能运行,但是控制台会报错。。
-
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> ) } }