React.js 小书 Lesson8 - 组件的组合、嵌套和组件树
React.js 小书 Lesson8 - 组件的组合、嵌套和组件树
转载请注明出处,保留原文链接以及作者信息 在线阅读:http://huziketang.com/books/react 继续拓展前面的例子,现在我们已经有了 class Title extends Component { render () { return ( <h1>React 小书</h1> ) } } class Header extends Component { render () { return ( <div> <Title /> </div> ) } } 我们可以直接在 <div> <Title /> <Title /> <Title /> </div> 这样可复用性非常强,我们可以把组件的内容封装好,然后灵活在使用在任何组件内。另外这里要注意的是,自定义的组件都必须要用大写字母开头,普通的 HTML 标签都用小写字母开头。 现在让组件多起来。我们来构建额外的组件来构建页面,假设页面是由 import React,{ Component } from 'react'; import ReactDOM from 'react-dom'; class Title extends Component { render () { return ( <h1>React 小书</h1> ) } } class Header extends Component { render () { return ( <div> <Title /> <h2>This is Header</h2> </div> ) } } class Main extends Component { render () { return ( <div> <h2>This is main content</h2> </div> ) } } class Footer extends Component { render () { return ( <div> <h2>This is footer</h2> </div> ) } } class Index extends Component { render () { return ( <div> <Header /> <Main /> <Footer /> </div> ) } } ReactDOM.render( <Index />,document.getElementById('root') ) 最后页面会显示内容:
组件可以和组件组合在一起,组件内部可以使用别的组件。就像普通的 HTML 标签一样使用就可以。这样的组合嵌套,最后构成一个所谓的组件树,就正如上面的例子那样,
这里的结构还是比较简单,因为我们的页面结构并不复杂。当页面结构复杂起来,有许多不同的组件嵌套组合的话,组件树会相当的复杂和庞大。理解组件树的概念对后面理解数据是如何在组件树内自上往下流动过程很重要。 下一节中我们将介绍《React.js 小书 Lesson9 - 事件监听》。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |