- ReactJS by Example:Building Modern Web Applications with React
- Vipul A M Prathamesh Sonpatki
- 373字
- 2021-07-09 19:36:59
Namespaced components
"Shawn, you must have used modules and packages in languages such as Ruby and Java. The idea behind these concepts is to create a namespace hierarchy of code such that the code from one module or package doesn't interfere with another."
"Yes. Is something like this available with React?" Shawn asked.
"Yes. React allows creating components that are namespaced under a parent component so that they don't interfere with other components or global functions."
"We are using very generic names such as Rows and Headings that can be used later in other parts of the app too. So it makes sense to namespace them now, rather than later." explained Mike.
"Agreed. Let's do it right away," Shawn.
"We need to represent the top-level component as custom component rather than using the <table>
element."
var RecentChangesTable = React.createClass({ render: function() { return <table> {this.props.children} </table>; } });
"Now, we can replace the App
component to use RecentChangesTable
instead of <table>.
"
var App = React.createClass({ render: function(){ return(<RecentChangesTable> <Headings headings = {this.props.headings} /> <Rows changeSets = {this.props.changeSets} /> </RecentChangesTable>); } });
"Hang on, Mike. We just replaced <table>
with a custom component. All it does is just render this.props.children
. How does it get all the headings and rows?" Shawn asked.
"Ah! Nice observation. React, by default, captures all the child nodes between open and close tags of a component in an array and adds it to the props of that component as this.props.children
. So we can render it using {this.props.children}
. We will get all Headings and Rows as this.props.children
in the RecentChangesTable
component. The output is the same as before, when we used the <table>
tag directly."
"Awesome!" exclaimed Shawn.
"Cool. Let's move on next step by namespacing all other components under RecentChangesTable
."
RecentChangesTable.Headings = React.createClass({ render: function() { var headings = this.props.headings.map(function(name) { return(<RecentChangesTable.Heading heading = {name}/>); }); return (<thead><tr>{headings}</tr></thead>); } }); RecentChangesTable.Heading = React.createClass({ render: function() { return(<th> {this.props.heading} </th>); } }); RecentChangesTable.Row = React.createClass({ render: function() { return(<tr> <td>{this.props.changeSet.when}</td> <td>{this.props.changeSet.who}</td> <td>{this.props.changeSet.description}</td> </tr>); } }); RecentChangesTable.Rows = React.createClass({ render: function() { var rows = this.props.changeSets.map(function(changeSet) { return(<RecentChangesTable.Row changeSet = {changeSet}/>); }); return (<tbody>{rows}</tbody>); } });
"We will also need to update the App
component to use namespaced components now."
var App = React.createClass({ render: function(){ return(<RecentChangesTable> <RecentChangesTable.Headings headings = {this.props.headings} /> <RecentChangesTable.Rows changeSets = {this.props.changeSets} /> </RecentChangesTable>); } });
"We are now done. Everything is namespaced under RecentChangesTable
now", said Mike.
- 零基礎(chǔ)學(xué)Visual C++第3版
- Java范例大全
- LabVIEW入門與實戰(zhàn)開發(fā)100例
- 面向STEM的Scratch創(chuàng)新課程
- Visual Basic程序設(shè)計習(xí)題解答與上機指導(dǎo)
- Visual C++數(shù)字圖像處理技術(shù)詳解
- JAVA程序設(shè)計實驗教程
- 運用后端技術(shù)處理業(yè)務(wù)邏輯(藍橋杯軟件大賽培訓(xùn)教材-Java方向)
- SQL Server數(shù)據(jù)庫管理與開發(fā)兵書
- ASP.NET程序開發(fā)范例寶典
- Java EE Web應(yīng)用開發(fā)基礎(chǔ)
- 深度實踐KVM:核心技術(shù)、管理運維、性能優(yōu)化與項目實施
- 編寫高質(zhì)量代碼之Java(套裝共2冊)
- PHP典型模塊與項目實戰(zhàn)大全
- 亮劍C#項目開發(fā)案例導(dǎo)航