Comments (1)
React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点。
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
还有一种新的短语法可用于声明它们。
动机
一种常见模式是组件返回一个子元素列表。以此 React 代码片段为例:
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
<Columns />
需要返回多个 <td>
元素以使渲染的 HTML 有效。如果在 <Columns />
的 render()
中使用了父 div,则生成的 HTML 将无效。
class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
得到一个 <Table />
输出:
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
Fragments 解决了这个问题。
用法
class Columns extends React.Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
}
这样可以正确的输出 <Table />
:
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
短语法
你可以使用一种新的,且更简短的语法来声明 Fragments。它看起来像空标签:
class Columns extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}
你可以像使用任何其他元素一样使用 <> </>
,除了它不支持 key 或属性。
带 key 的 Fragments
使用显式 <React.Fragment>
语法声明的片段可能具有 key。一个使用场景是将一个集合映射到一个 Fragments 数组 - 举个例子,创建一个描述列表:
function Glossary(props) {
return (
<dl>
{props.items.map(item => (
// 没有`key`,React 会发出一个关键警告
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}
key
是唯一可以传递给 Fragment
的属性。未来我们可能会添加对其他属性的支持,例如事件。
from fe-interview.
Related Issues (20)
- nuxt有哪些特性?为什么要用nuxt做服务端渲染?它解决了什么问题? HOT 1
- CSS Sprites(雪碧图)原理及其优缺点 HOT 1
- 图片懒加载原理及如何实现 HOT 1
- JS获取url参数的方法 HOT 1
- 手写实现一个合乎规范的Promise HOT 1
- requestAnimationFrame原理及兼容性封装 HOT 1
- 用过HappyPack吗?HappyPack有什么优点? HOT 2
- eslint忽略全局变量的方法 HOT 1
- webpack配置路径别名 HOT 1
- webpack添加路径别名后,vscode不能智能提示,如何解决? HOT 1
- 如何只用两行代码实现判断js中所有数据类型 HOT 1
- nrm和nvm HOT 1
- 不用window.open打开新窗口 HOT 1
- js变量提升 HOT 1
- js中精度问题及解决方案 HOT 2
- webpack之less-loader、css-loader、style-loader执行顺序 HOT 1
- js实现普通数组去重&json数组去重 HOT 1
- 常见的js模板引擎
- js原生实现拷贝到剪贴板 HOT 1
- iframe内嵌网页未知高度如何自适应 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fe-interview.