数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时装学
法律学ReactJS——片段
在构建 ReactJS 应用程序时，所有 JSX 代码都需要包装在父级标签内。
ReactJS 片段在 React 16.2 版本中引入，以消除定义额外 <div> 标签的需要，该标签还会占据额外的内存。
不含片段
以下示例代码演示了如何在不使用 React 片段的情况下创建一个简单的 React 应用程序。
示例
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h2>TutorialsPoint</h2>
<p>Simply Easy Learning</p>
</div>
);
}
}
export default App;输出
使用片段
在上述示例中，我们必须使用额外的 <div> 标签来包装子级 JSX 元素。因此，使用 ReactJS 16.2 版本，我们将使用 React.Fragment，这将消除使用无关的 <div> 标签的需要。
示例
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<React.Fragment>
<h2>TutorialsPoint</h2>
<p>Simply Easy Learning</p>
</React.Fragment>
);
}
}
export default App;输出
片段简写
我们还可以使用 <> 而不是 React.Fragment，但是此简写语法不接受 key 属性。
示例
import React from 'react';
class App extends React.Component {
render() {
return (
<>
<h2>TutorialsPoint</h2>
<p>Simply Easy Learning</p>
</>
);
}
}
export default App;输出
更新于： 18-Mar-2021
366 次浏览
广告