React.js 小书 Lesson22 - props.children 和容器类组件
React.js 小书 Lesson22 - props.children 和容器类组件
转载请注明出处,保留原文链接以及作者信息 在线阅读:http://huziketang.com/books/react 有一类组件,充当了容器的作用,它定义了一种外层结构形式,然后你可以往里面塞任意的内容。这种结构在实际当中非常常见,例如这种带卡片组件:
组件本身是一个不带任何内容的方形的容器,我可以在用这个组件的时候给它传入任意内容:
基于我们目前的知识储备,可以迅速写出这样的代码: class Card extends Component { render () { return ( <div className='card'> <div className='card-content'> {this.props.content} </div> </div> ) } } ReactDOM.render( <Card content={ <div> <h2>React.js 小书</h2> <div>开源、免费、专业、简单</div> 订阅:<input /> </div> } />,document.getElementById('root') ) 我们通过给 这样明显太丑了,如果 ReactDOM.render( <Card> <h2>React.js 小书</h2> <div>开源、免费、专业、简单</div> 订阅:<input /> </Card>,document.getElementById('root') ) 如果组件标签也能像普通的 HTML 标签那样编写内嵌的结构,那么就方便很多了。实际上,React.js 默认就支持这种写法,所有嵌套在组件中的 JSX 结构都可以在组件内部通过 class Card extends Component { render () { return ( <div className='card'> <div className='card-content'> {this.props.children} </div> </div> ) } } 把
React.js 就是把我们嵌套的 JSX 元素一个个都放到数组当中,然后通过 由于 JSX 会把插入表达式里面数组中的 JSX 一个个罗列下来显示。所以其实就相当于在 这种嵌套的内容成为了 class Layout extends Component { render () { return ( <div className='two-cols-layout'> <div className='sidebar'> {this.props.children[0]} </div> <div className='main'> {this.props.children[1]} </div> </div> ) } } 这是一个两列布局组件,嵌套的 JSX 的第一个结构会成为侧边栏,第二个结构会成为内容栏,其余的结构都会被忽略。这样通过这个布局组件,就可以在各个地方高度复用我们的布局。 总结使用自定义组件的时候,可以在其中嵌套 JSX 结构。嵌套的结构在组件内部都可以通过 下一节中我们将介绍《React.js 小书 Lesson23 - dangerouslySetHTML 和 style 属性》。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |