Javascript

Question

我正在思考这是如何编码的

https://github.com/ReactTraining/react-router/blob/dc2149ec0c63bfc95b71e40c81431e34cfbfeda9/packages/react-router-dom/modules/NavLink.js#L8

const NavLink = ({
  to,
  exact,
  strict,
  activeClassName,
  className,
  activeStyle,
  style,
  isActive: getIsActive,
  ...rest
}) => (
  <Route
    path={typeof to === 'object' ? to.pathname : to}
    exact={exact}
    strict={strict}
    children={({ location, match }) => {
      const isActive = !!(getIsActive ? getIsActive(match, location) : match)

      return (
        <Link
          to={to}
          className={isActive ? [ activeClassName, className ].join(' ') : className}
          style={isActive ? { ...style, ...activeStyle } : style}
          {...rest}
        />
      )
    }}
  />
)

这是怎么回事？这是在定义一个返回 JSX 元素的函数吗？唯一让我感到困惑的是 JSX 元素被包裹在括号中 ()

第一部分发生了什么isActive: getIsActive？

我正在查看 http://es6-features.org/#ExpressionBodies，但找不到直接示例。

我试图找出如何使用 router 的 isActive 方法，但无法解析这段代码。

Answer 1

isActive: getIsActive - 这是 isActive 的别名 getIsActive。在组件的 props 中有一个叫做 isActive，它是通过使用对象解构提取的，并在本地重命名为 getIsActive.

此处需要括号，因为 jsx 标记跨越多行。如果它是单行 jsx，则不需要括号。

是的，这是一个 returns jsx 标记的函数（组件）。这被称为 stateless component 因为它只是一个简单的函数。相反的是一个完整的 React 组件，它扩展了 React.Component.

Answer 2

您在函数参数中看到的是对象解构。每当你创建一个无状态组件时，它都会将 props 作为参数传递给无状态函数。 isActive: getIsActive 是说从 props 对象中获取属性 isActive 并将其设置为一个名为 getIsActive 的变量，这是您可以通过对象解构来完成的事情。其余部分只是从 props 对象中提取我们想要的特定属性，并将它们变成自己的变量。这对于声明组件将要使用的道具非常有用。 ...rest 将创建一个名为 rest 的变量，它将是一个具有之前未声明的剩余属性的对象。

您可以在此处找到有关解构的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects into distinct variables.

括号在那里是因为 jsx 跨越多行而不是在一行上，并且因为我们立即返回并且不在函数中进行任何赋值，所以我们不需要在函数体周围使用块。

Javascript - React - 箭头函数使用理解

Javascript - React - Arrow Function Usage Understanding

ecmascript-6

reactjs

arrow-functions