使用 JSX 合并子节点
介绍
JSX（JavaScript XML）最适合在 HTML 标记中编写 JavaScript。由于其呈现 DOM 元素的方式和可维护性，它是与 React 一起使用的首选。在使用 React 进行开发时，必须使用父子元素的组合或根据支持条件动态呈现的一组元素，以便足以管理 DOM 元素。
JSX 可以在父元素内单独渲染子元素，您将在本指南中学习相同的方法。
创建子 JSX 元素
在渲染或组合各种子 JSX 元素之前，您需要在render()中创建它们，或者通过创建单独的函数并返回所需的一组 JSX 标记来创建它们。要组合子 JSX 元素，您需要确保它适合要渲染它的同一受支持元素。
例如，您想将多个<Button>渲染为单独的 JSX 元素。因此，您需要一个<ButtonToolbar>类型的容器，您可以在其中渲染这些子 JSX 按钮。创建一个函数，如果<li>元素如下所示，则返回列表。
renderList1 = () => {
return (
<>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</>
);
};
上述函数返回五个不同的<li>项的片段，这些片段只能在<ul>元素内呈现，因为它仅支持<li>作为子元素。
创建另一个函数，返回另外五个<li>元素列表的片段。
renderList2 = () => {
return (
<>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</>
);
};
函数renderList1()和renderList2()除了它们的值之外几乎相同；现在，将<li>元素列表组合起来呈现为单个<ul>元素是一项挑战。
将子 JSX 节点与父节点合并
在上一节中，创建了两个单独的函数，它们返回<li>元素集，但它们应该在单个<ul>元素内呈现。
JSX 的灵活性远超您能放入任何符合 HTML 标记的函数，并且相应函数的内容将在返回时呈现。下面是最简单的代码片段之一，它将两个不同的 JSX 代码集合并为一个并呈现其各自的内容。
render() {
return (
<>
<div>
<ul>
{this.renderList1()}
{this.renderList2()}
</ul>
</div>
</>
);
}
在<ul>元素内，如果使用两个不同的函数并用花括号{ }包裹，则意味着函数/表达式的内容将被执行，并且元素将在引用它们的任何地方得到呈现。
下面是示例的完整代码。
import React, { Component } from "react";
export class Example1 extends Component {
renderList1 = () => {
return (
<>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</>
);
};
renderList2 = () => {
return (
<>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</>
);
};
render() {
return (
<>
<div>
<ul>
{this.renderList1()}
{this.renderList2()}
</ul>
</div>
</>
);
}
}
export default Example1;
运行上述示例后，您可以看到来自函数集合的 JSX 元素集在单个<ul>元素内以无序列表的形式呈现。
您可以尝试创建函数并返回一组 JSX 元素。通过使用函数式渲染方法，代码将易于管理，并且使用 JSX 语法组合子节点非常有效。
结论
由于 HTML 标记内含有 JavaScript，因此 JSX 对于 React.js 开发人员而言始终是一个方便的选择，并且由于其简单的语法，渲染父子 JSX 元素比以往任何时候都更加简单。
您可以尝试组合父节点和子节点并有条件地渲染子节点；这就是如何使用 React 应用程序有效地实现 JSX。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~