当使用ReactJS和JSX时，我们可以编写以某种方式返回一些元素的纯JS代码吗？

html5 • • 问答 • 189 阅读

当我们在 JSX 中返回一些东西时，我们可以这样写：

  <ul>
    {Array.from({ length: 9 }).map((e, i) => (
      <li>{i}</li>
    ))}
  </ul>

或使用 IIFE：

  <ul>
    {(function () {
      const result = [];
      for (let i = 0; i < 9; i++) {
        result.push(<li>{i}</li>);
      }
      return result;
    })()}
  </ul>

示例：https : //codesandbox.io/s/busy-aryabhata-egv27

但是有没有可能写出类似的东西：

  <ul>
    {
      const result = [];
      for (let i = 0; i < 9; i++) {
        result.push(<li>{i}</li>);
      }
      return result;  // somehow "return" the array
    }
  </ul>

也就是说，只需编写没有 IIFE 的纯代码，并且能够以某种方式返回我们创建的数组？

回答

您可以将 for 循环拉到 JSX 上方，如下所示：

const result = [];
for (let i = 0; i < 9; i++) {
  result.push(<li>{i}</li>);
}

return (
  <ul>
    {result}
  </ul>
)

但是如果你想把这段代码嵌入到 JSX 中，那么你只能使用表达式，而不能使用语句。这就是第二个例子中 IIFE 的原因：它是一个表达式，所以你可以把它放在 JSX 中，但它可以包含语句，从而让你有点作弊。

记住 JSX 被转换为函数调用（或一系列函数调用）可能会有所帮助。例如，这个：

<ul>{something}</ul>

变成这样：

React.createElement("ul", null, something);

查看该函数版本，很明显以下代码不是合法语法：

React.createElement(
  "ul",
  null,
  const result = [];
  for (let i = 0; i < 9; i++) {
    result.push(<li>{i}</li>);
  }
  return result;
)

这就是 JSX 也不会让你这样做的原因。

以上是当使用ReactJS和JSX时，我们可以编写以某种方式返回一些元素的纯JS代码吗？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>