在 React 的渲染函数中返回变量
介绍
JSX 代表 JavaScript XML，这是一种编码标准，允许您内联使用 JavaScript 表达式和其他 HTML 功能。使用 JSX，您可以创建一个函数并将一组 JSX 元素返回给一个变量，该变量用于在 React 中的 render ()函数内渲染元素。
本指南将帮助您了解如何将 JSX 返回给变量并将 JSX 标记呈现到 DOM。
将静态 JSX 内容返回给变量
JSX 与 React 一起使用，可以移除组件中松散耦合的部分，例如 HTML、CSS 和 JavaScript，并让它们在名为组件的单个文件中协同工作。它的语法易于编写且视觉效果引人注目。因此，JSX 元素也可以返回到变量，并且该变量可用于渲染。
为了进行示例演示，我们在函数内创建一个静态表并将其返回给变量。我们还将在函数内创建一个静态<table> 。
getTable() {
return (
<div>
<table border="2">
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
</tr>
</table>
</div>
);
}
该表在函数内创建，并向函数返回一组 JSX 标记。因此，一旦您访问该函数，表的各个 JSX 标记将被替换。
下一步是调用函数并将其分配给变量，如下所示。
render() {
// Calling function and assigned it to the variable
const mytable = this.getTable();
return (
<>
{/* rendered the JSX */}
<div>{mytable}</div>
</>
);
}
函数this.getTable()被调用并返回完整的<table>元素，因此一旦将其放置在return()中，该元素就会被创建到 DOM 中。
条件渲染 JSX
静态和动态内容都可以提供给 DOM。因此，您可以根据各个条件运算符（例如三元运算符）呈现动态内容。例如，如果您想显示活跃或不活跃的登录用户状态，状态颜色或标签可能会根据条件而变化，例如变为绿色或红色。
为了更清楚的理解，创建两个函数，分别显示活动状态标签和非活动状态标签。
activeContent() {
return <label>Active</label>;
}
inActiveContent() {
return <label>In-active</label>;
}
上述每个函数都将特定的 JSX 元素作为 JSX <label>元素返回，但是，您应该有一些标识符或条件来动态显示状态。
创建状态对象中的键，如下所示。
constructor(props) {
super(props);
this.state = {
isActive: false
};
}
观察到组件中有一个名为isActive的键，并且相同的变量可以用作可以为真或为假的条件。
现在，让我们调用上述两个函数并将其结果放入附加变量中。
const activeVariable = this.activeContent();
const inactiveVariable = this.inActiveContent();
activeVariable用于保存活动标签状态，inactiveVariable保存非活动状态标签。两者可以使用三元运算符互换，如下所示。
render() {
const activeVariable = this.activeContent();
const inactiveVariable = this.inActiveContent();
return (
<>
{this.state.isActive ? activeVariable : inactiveVariable}
</>
);
}
上面的三元条件使用this.state.isActive，并根据其值（true 或 false）将相应的标签渲染到 DOM 中。在render()中使用变量是一种常见的方法。大多数 React 开发人员使用它们来管理来自函数实现的动态内容，并且它们在整个组件中都很容易操作。
结论
React 中的 JSX 不是必需的方法，但它可以有效地用于使用基于 JavaScript 的表达式和其他与 HTML 标记相关的功能。
在渲染函数中返回变量是管理 JSX 标记的最简单方法，无论内容是静态的还是动态的。尝试一下并深入了解 JSX！
了解更多
探索 Pluralsight 的这些 React 课程以继续学习：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
扫一扫，分享到微信
