React jsx 属性避免重复的属性名称

Question

我正在使用 Nextjs 我真的不知道如何描述我的问题，但这里有一个例子。

在我的代码中，我得到的很少

const pathname = router.pathname
<NavItem pathname={pathname} ... />

有没有办法避免那种重名？让它更短？可能是这样

<NavItem {pathname} ... />

不知道可不可以，我不是第一次找这种文风了

谢谢

Answer 1

我能想到的唯一方法是使用 spread syntax。对一个道具来说可能有点矫枉过正，但对很多人都有用。

你先这样定义一个对象。

const { pathname } = router;
const shortened = {
  pathname,
};

我们一行一行看吧

第一行是使用 object destructing 从 router 获取 pathname 键。这样会简化后面写的对象

second-to-fourth 行定义了一个名为 shortened 的对象（或者任何你想给它起的名字）。在其中，我们传入 pathname 作为键和值合二为一（如二合一）。这只是 shorthand 表达 pathname: pathname.

的方式

现在，让我们继续学习 JSX！

让我们在这里使用 JSX，看看它有什么作用。

<NavItem {...shortened} />

基本上，添加它正在做的是使用传播语法 (...) “传播” 对象，以便在解析时看起来像这样。

<NavItem pathname={pathname} />

所以，它只是获取键和值，然后像那样展开。

您还可以在不更改 JSX 的情况下向对象添加更多键和值，这样可以更轻松、更快速地输入！它也可能看起来更好（取决于你是谁）。

React jsx attribute avoid duplicate attribute name