#13 黑色边框的容器组件
-
0
实现一个组件
BlackBorderContianer
,它会把作为它的嵌套结构的 每个直接子元素 都用一个黑色边框的div
包裹起来。例如:<BlackBorderContainer> <div className='name'>My Name:Lucy</div> <p className='age'> My Age:<span>12</span> </p> </BlackBorderContainer>
最后的
div.name
和p.age
都具有一层黑色边框(1px solid #000000
)外层结构。
-
0
@胡子大哈 这个 一直提示“嵌套的子元素没有正确渲染” 能不能给下正确答案
css: .name{ border:1px solid #000000 } .age{ border:1px solid #000000 } div.divChid{ border:1px solid #000000 } js: class BlackBorderContainer extends Component { render(){ return ( <div className="divChid">{this.props.children[2]}</div> ) } }
-
1
CSS:
.border { border: 1px solid #000; }
JS:
class BlackBorderContainer extends Component { render () { return (<div>{this.props.children.map((el) => { return ( <div className='border'>{el}</div> ) })}</div>) } }
-
0
@胡子大哈 谢谢 但是为什么 这块要循环childre?不是 “把作为它的嵌套结构的第一层的内容都用一个黑色边框的 div 包裹起来” 吗
-
0
-
0
@胡子大哈 奥奥 好的 谢谢啦 还有我想请问下那个这个答案的评测 你是用什么开发的?感觉很智能
-
0
@francis 你说的是这套系统的评测,还是这道题的评测呢?😁
-
0
@胡子大哈 这个系统的测评
-
5
@francis 这个问题问得非常好啊,我一直希望有人问这个问题。哈哈。
这个系统的后台是用 Node.js 写的,但是评测的时候会把代码放到一个浏览器里面执行,运行的时候除了会执行你的代码也会执行相应的测试用例。这个跟我们平时的写业务的时候写的测试有点类似。
所以说起来也很简单,就是 Node.js + 浏览器 + 代码执行 + 测试用例。
但实际上也有点复杂,因为要处理很多情况。例如死循环检测、依赖引入、浏览器进程管理等等。这些细节有兴趣我以后会写篇博客讨论写。
玩的不错可以向朋友推荐下哈 😄,有什么意见建议也可以提。
-
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
@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
@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 所以这个系统是你一个人写的? 一个 个 人??? 天呐