时间戳

首页 > 解决方案 > 如何在多个级别嵌套 JavaScript 代码和伪 HTML 元素？

reactjs - 如何在多个级别嵌套 JavaScript 代码和伪 HTML 元素？

问题描述

我还没有阅读过这样的规则，但是以下是如何工作的？

我们可以写

return <ul>{this.state.numbers.map(a => <li>{a}</li>)}</ul>;

规则是

  1. 当我们看到第一个词return时，它是普通的 JS
  2. 当我们处于常规JS模式时，我们可以自由开始任何“伪HTML标签”，当它变成<ul>“伪HTML标签模式”时，我们不能有任何常规JS代码，除非我们开始另一个{
  3. 现在我们有了一个{，我们又回到了常规的 JS 模式，但是我们可以开始使用 any<div>或<li>再次，但只要那些没有“关闭”或有最终结束标记，它将继续是“伪 HTML 标记模式”。
  4. 所以这就是为什么我们可以拥有<li>，但是要再次使用任何 JS 代码，我们再次需要启动一个{

所以也许可以概括为：我们可以写任何正则的JS代码，甚至<div>etc都可以认为是JS代码，但只要它没有被final关闭</div>，那么我们就不能再有正则的JS代码了，除非如果我们从{. 然后，我们可以再次拥有常规的 JS 代码，并且可以自由地开始另一个<span>或其他任何事情。当它<span>以 结束时</span>，我们可以使用常规的 JS 代码；但在此之前，如果我们需要再次使用任何常规的 JS 代码，我们需要重新开始{。

这是它的工作原理吗？这在任何 JSX 文档中都提到过吗？

标签： reactjsjsx

解决方案

实际上，正如您提到的，这是 JSX，您无法在其中编写纯 JavaScript 代码（例如 if-else、for 等）。当我们使用 babel 转换您的代码时，它似乎

function render() {
  return _react.default.createElement("ul", null, this.state.numbers.map(function (a) {
    return _react.default.createElement("li", null, a);
  }));
}

如您所见，标签是元素。我们可以说部分是的，这就是它的工作原理。

你可以使用Babel jsx 转换

关于 jsx 的另一个有用的链接。JSX 的 6 条规则：实时备忘单

推荐阅读