【全栈React】第4天: 复杂组件
太棒了,我们已经构建了第一个组件。现在让我们来看一下,开始构建一个更复杂的界面。 React 30天 前一章节,我们开始构建我们的第一个 我们可能会看到一个常见的网页元素是用户时间轴。例如,我们可能会有一个应用显示事件发生的历史,如Facebook和Twitter等应用。 我们_可以_在单个组件中构建整个UI。然而,在单个组件中构建整个应用不是一个好主意,因为它可能非常大,复杂且难以测试。 class Timeline extends React.Component { render() { return ( <div className="notificationsFrame"> <div className="panel"> <div className="header"> <div className="menuIcon"> <div className="dashTop"></div> <div className="dashBottom"></div> <div className="circle"></div> </div> <span className="title">Timeline</span> <input type="text" className="searchInput" placeholder="Search ..." /> <div className="fa fa-search searchIcon"></div> </div> <div className="content"> <div className="line"></div> <div className="item"> <div className="avatar"> <img alt='doug' src="http://p0.qhimg.com/t01e9226cd16ce24fb4.jpg" /> </div> <span className="time"> An hour ago </span> <p>Ate lunch</p> </div> <div className="item"> <div className="avatar"> <img alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" /> </div> <span className="time">10 am</span> <p>Read Day two article</p> </div> <div className="item"> <div className="avatar"> <img alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" /> </div> <span className="time">10 am</span> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <div className="item"> <div className="avatar"> <img alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" /> </div> <span className="time">2:21 pm</span> <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </div> </div> </div> ) } } 拆分一下比将其构建在单个组件中更好的做法是,我们将其分解成多个组件。 看这个组件,整个大组件有两个独立的部分:
我们可以将组件的内容部分划分成个别的关注点。内容部分内有3个不同的_项目_组件。
在任何情况下,在应用中开始寻找使用的_组件_想法通常是一个好主意。通过将我们的应用分解成组件,变得更容易测试,更容易跟踪哪些功能在哪里。 容器组件要构建我们的通知应用,让我们开始构建容器来保存整个应用。我们的容器只是另外两个组件的包装器。 这些组件都不需要特殊的功能,它们看起来类似于我们的 我们来构建一个我们将要调用的_包装器_组件 class App extends React.Component { render() { return ( <div className="notificationsFrame"> <div className="panel"> {/* content goes here */} </div> </div> ) } }
子组件当组件嵌套在另一个组件中时,它被称为 子组件。组件可以有多个子组件。然后将使用子组件的组件称为 父组件。 随着容器组件的定义,我们可以建立我们 例如,标题组件包括 容器元素 class Header extends React.Component { render() { return ( <div className="header"> <div className="fa fa-more"></div> <span className="title">Timeline</span> <input type="text" className="searchInput" placeholder="Search ..." /> <div className="fa fa-search searchIcon"></div> </div> ) } } 最后,我们可以 class Content extends React.Component { render() { return ( <div className="content"> <div className="line"></div> {/* Timeline item */} <div className="item"> <div className="avatar"> <img alt='Doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" /> Doug </div> <span className="time"> An hour ago </span> <p>Ate lunch</p> <div className="commentCount"> 2 </div> </div> {/* ... */} </div> ) } }
把它们放在一起现在,我们有我们这两个_子组件_,我们可以设置 class App extends React.Component { render() { return ( <div className="notificationsFrame"> <div className="panel"> <Header /> <Content /> </div> </div> ) } } 有了这些知识,我们现在有能力编写多个组件,我们可以开始构建更复杂的应用程序。 但是,您可能会注意到此应用没有任何用户交互或自定义数据。事实上,正如我们现在所说的那样,我们的React应用程序并不比直接构建不复杂的HTML容易。 在下一节中,我们将介绍如何使我们的组件更加动态,并使用 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |