时间戳

首页 > 解决方案 > 在 JS 中，为什么有时应该在“< >”中定义一个函数？

javascript - 在 JS 中，为什么有时应该在“< >”中定义一个函数？

问题描述

所以请多多包涵... :-)

我试图了解现有的 JS 是如何工作的。我看到这个……

const SqfPageWrap = (props) => <SqfPage {...props} flow='submit' />

我已经阅读了箭头函数并理解（相信）“const SqfPageWrap = (props) =>”片段只是...的简写。

const function SqfPageWrap (props) =

但在所有示例中，我发现谷歌搜索箭头函数，后面的函数定义在花括号内......

const function SqfPageWrap (props) = {function code in here}

看来这里的功能是...

<SqfPage {..props} flow='submit' />

这对我来说看起来不像一个功能。它看起来更像 html。谁能解释这里发生了什么？

此代码正在“react”包装器中使用。我不知道这对于这个例子是否重要。

标签： javascript

解决方案

React 使用称为 JSX 的特殊 Javascript 语言扩展，它允许您在 Javascript 中定义 HTML 结构。

因此，如果我们检查您正在查看的这个函数：

const SqfPageWrap = (props) => <SqfPage {...props} flow='submit' />

这是定义一个函数，该函数返回具有某些属性的 HTML 元素 SqfPage。您将其编写为非箭头函数的方式如下：

function SqfPageWrap(props) {
  return <SqfPage {...props} flow='submit' />
}

在底层，JSX 编译成一堆函数调用，最终创建一个对象，保存关于您在 JSX 中定义的 HTML 结构的数据。然后 React 可以使用该对象将 HTML 实际插入页面，或修改页面中的 HTML 等。

请参阅此页面以了解有关 jsx 的更多信息。

推荐阅读