从子组件访问 NextJs Link href 属性答案

【问题标题】：Accessing to the NextJs Link href property from children component从子组件访问 NextJs Link href 属性
【发布时间】：2020-09-28 18:13:45
【问题描述】：

我正在使用 NextJs 处理 活动按钮 行为。

现在每个按钮都包含在 Next link 组件中，如下所示：

<Link href={href} key={key} passHref>
  <MenuItem
    disableRipple
    style={{ color: router.pathname === href && "#5e62ff" }}
  >
    {localizedTitle(label)}
  </MenuItem>
</Link>

如您所见，link 将href 传递给子组件，这可以通过查看 React 工具部分来确保，但 href 属性在MenuItem 组件未定义。

如何从其子组件（在本例中为MenuItem）获取link href 组件？

【问题讨论】：

这个href可能不是来自ListContext.Provider吗？是不是可以直接将href传递给MenuItem组件？
不，它来自 NextJs link 组件本身。

标签： reactjs material-ui next.js

【解决方案1】：

我选择使用className 属性而不是使用style，而且在新版本中似乎已修复此错误。

import {
  MenuItem,
} from "@material-ui/core";
import Link from "next/link";
---
{navLinks &&
                  Object.keys(navLinks).length !== 0 &&
                  menuLinks.map(({ key, href, label }) => (
                    <Link href={href} key={key} passHref>
                      <MenuItem
                        role="tab"
                        disableRipple
                        className={
                          router.pathname === href ? classes.activeItem : ""
                        }
                        onClick={() => setOpen(!open)}
                      >
                        {localizedTitle(label)}
                      </MenuItem>
                    </Link>
                  ))}

【讨论】：