如何在 React 中使用一个组件渲染多个 HTML 片段
介绍
典型的 React 组件预计会返回多个 JSX 元素。React中的Fragments允许您返回多个子元素，而无需将不必要的节点填充到 DOM。这符合 React 的组件架构，并且还可以提高复杂且更深层次的应用的性能。
本指南探讨了一种通过 React 片段在 React.js 中渲染许多 HTML 元素的简单方法。
React 中的 Fragments
在 React 16.2 之前，你只能在 render 方法中渲染单个 DOM 节点。现在，你可以渲染多个 DOM 节点。为此，请将其包装在父div中，这实际上使其成为包含多个元素的单个 DOM 节点。React 中的片段与其字面意思没有太大偏差。在组件中渲染 DOM 元素时，片段可让你将 DOM 元素组合在伪包装器中。此包装器（即片段本身）不被视为 DOM 节点。
包装器渲染
考虑以下代码片段：
class Countries extends React.Component {
render() {
return (
<li>Canada</li>
<li>Australia</li>
<li>Norway</li>
<li>Mexico</li>
)
}
}
如果你在 React 中运行此代码，则会收到错误：语法错误：相邻的 JSX 元素必须包裹在封闭的标签中。React 看到你的渲染方法试图输出多个 DOM 节点，并通过抛出此错误来阻止你这样做。
像这样修改上述代码，你会发现错误消失了。
class Countries extends React.Component {
render() {
return (
<div className="country-names">
<li>Canada</li>
<li>Australia</li>
<li>Norway</li>
<li>Mexico</li>
</div>
)
}
}
解决方法是使用包装器div或span元素作为封闭标签。本质上，React 认为 render 方法输出的是单个 DOM 节点，其中包含多个子元素。
使用片段
创建一个空项目
确保您的机器上安装了 Nodejs 和 npm（至少版本 8 或更高版本），以及代码编辑器和 Web 浏览器（最好是 Chrome 或 Firefox）。
使用 create-react-app 创建一个新项目：
npx create-react-app react-read-more
清理模板
从App.js中删除徽标、App.css及其所有导入。清除 App 组件内的入门模板。你的App.js应该如下所示：
import React from 'react';
import './App.css';
function App() {
return(
<div className="App">
</div>
)
}
export default App;
注意：有时删除 App.css 可能会导致错误。在这种情况下，不要删除 App.css，而是将其保留为空，或者如果已删除它，请在根目录中创建一个同名的空白 CSS 文件。
设置开发服务器
在根目录中，运行：
npm start
这将启动一个本地开发服务器（通常在端口 3000），您可以在浏览器中实时看到所有更改。
使用片段渲染多个 JSX 元素
将你的 JSX 包装在封闭的<React.Fragment>标签中。
import React from 'react';
import './App.css';
function App() {
return (
<React.Fragment>
<li>ReactJS</li>
<li>AngularJS</li>
<li>VueJS</li>
<li>Bootstrap</li>
</React.Fragment>
);
}
export default App;
片段简写语法
您可以避免使用React.Fragment关键字，只需将片段的内容包含在一对<> </>中即可。这是片段的简写语法，如下所示。
import React from 'react';
import './App.css';
function App() {
return (
<>
<li>ReactJS</li>
<li>AngularJS</li>
<li>VueJS</li>
<li>Bootstrap</li>
</>
);
}
export default App;
通过单个 React 片段渲染多个 HTML 片段
您可以将片段内的任意数量的元素渲染为遵循其常规树结构的子节点，因为片段本身不是 DOM 节点。
import React from 'react';
import './App.css';
function App() {
return (
<>
<div> This is a div
<h2> This is a div sub heading </h2>
</div>
<li>This is list item 1</li>
<li>This is list item 2</li>
<li>This is list item 3</li>
<div>This is another div
<p>some text inside div</p>
</div>
</>
);
}
export default App;
例如，在上面的例子中，你的片段有五个父节点：第一个<div>，后面跟着三个<li>，然后是另一个<div>。在<div>内部，你有子元素<h2>和<p>。因此，你的 DOM 模型仍然保持为分层树。
在单个组件中渲染多个 React Fragment
您可以将 UI 组件作为片段组件嵌入到单个组件中。让我们来看一个用例，其中您想要呈现大洲、国家和城市列表。理想的方法是将这些列表分成单独的组件，然后将它们呈现在其父组件中。在src文件夹中，创建一个新文件夹components，并创建以下组件：
Continents.js
此组件在片段内呈现各大洲的列表。
import React from 'react';
const Continents=()=>{
return(
<React.Fragment>
<li>Asia</li>
<li>Austrailia</li>
<li>Antarctica</li>
</React.Fragment>
)
}
export default Continents;
国家.js
此组件呈现片段内的国家列表。
import React from 'react';
const Countries=()=>{
return(
<React.Fragment>
<li>India</li>
<li>China</li>
<li>Germany</li>
</React.Fragment>
)
}
export default Countries;
城市.js
此组件呈现片段内的城市*列表。
import React from 'react';
const Cities=()=>{
return(
<React.Fragment>
<li>Mumbai</li>
<li>Bengaluru</li>
<li>Kolkata</li>
</React.Fragment>
)
}
export default Cities;
最后，导入所有组件并在App.js中呈现它们。
import React from 'react';
import './App.css';
import Continents from './components/Continents';
import Countries from './components/Countries';
import Cities from './components/Cities';
function App() {
return (
<>
<Continents></Continents>
<Countries></Countries>
<Cities></Cities>
</>
);
}
export default App;
您无需创建单独的组件，而是可以将所有内容放在一个组件中。
import React from 'react';
import './App.css';
const Continents=()=>{
return(
<React.Fragment>
<li>Asia</li>
<li>Austrailia</li>
<li>Antarctica</li>
</React.Fragment>
)
}
const Countries=()=>{
return(
<React.Fragment>
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~