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并找不到直接的例子。

我试图找出如何使用isActive的{{1}}方法，但无法解析此代码。

Answer 1

isActive: getIsActive - 这是[{1}}与isActive的别名。在组件的道具中有一个名为getIsActive的道具，它通过使用对象解构提取并在本地重命名为isActive。

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

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

Answer 2

您在函数参数中看到的是对象解构。每当你创建一个无状态组件时，它就会响应props作为无状态函数的参数传入。 isActive: getIsActive表示从isActive对象获取属性props并将其设置为名为getIsActive的变量，这是您可以使用对象解构进行的操作。其余部分只是从props对象中提取我们想要的特定属性，并将它们转换为自己的变量。这非常适合声明组件将要使用的道具。 ...rest 将创建一个名为rest的变量，该变量将是一个具有之前未声明的剩余属性的对象。

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

解构赋值语法是一个JavaScript表达式可以将数组或对象中的数据提取到不同的数据中变量

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

Javascript - React - 箭头功能使用理解

2 个答案: