如何使用 getProps 和 setState 更改 Gatsby Link 文本

Posted 2023-03-17

【中文标题】如何使用 getProps 和 setState 更改 Gatsby Link 文本

【英文标题】：How to change Gatsby Link text with getProps and setState

【发布时间】：2021-05-21 21:10:12

【问题描述】：

我的 Gatsby 网站的 header.js 包含一个带有徽标和链接的简单导航。如果“关于”页面处于活动状态：

链接文本应从“关于”更改为“关闭” 链接 URL 应从“/about”更改为“/”

见下面header.js的代码：

import React,  useState  from "react"
import  Link  from "gatsby"

export default function Header() 
  const [aboutLink, setAboutLink] = useState(
    title: "About",
    url: "/about",
  )

  const closeLink = 
    title: "Close",
    url: "/",
  

  const isActive = ( isCurrent ) => 
    return isCurrent && setAboutLink(closeLink)
  

  return (
    <div id="header">
      <Link to="/">My Website</Link>
      <Link getProps=isActive to=aboutLink.url>aboutLink.title</Link>
    </div>
  )

我尝试使用setState 来实现这一点，它似乎有效。但不正确，因为我也在控制台中收到此错误：

Warning: Cannot update a component (`Header`) while rendering a different component (`Context.Consumer`). To locate the bad setState() call inside `Context.Consumer`, follow the stack trace as described in https://github.com/facebook/react/issues/18178#issuecomment-595846312
    in Location (created by Context.Consumer)
    in Link (created by GatsbyLink)
    in GatsbyLink (created by Context.Consumer)
    in Location (created by GatsbyLinkLocationWrapper)
    in GatsbyLinkLocationWrapper (created by ForwardRef)
    in ForwardRef (at header.js:22)
    in div (at header.js:20)
    in Header (at layout.js:8)
    in div (at layout.js:7)
    in Layout (at about.js:21)
    in About (created by HotExportedAbout)
    in AppContainer (created by HotExportedAbout)
    in HotExportedAbout (created by PageRenderer)
    in PageRenderer (at query-result-store.js:90)
    in PageQueryStore (at root.js:58)
    in RouteHandler (at root.js:80)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (at root.js:75)
    in ScrollHandler (at root.js:71)
    in RouteUpdates (at root.js:70)
    in EnsureResources (at root.js:68)
    in LocationHandler (at root.js:126)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:125)
    in Root (at root.js:134)
    in StaticQueryStore (at root.js:150)
    in ConditionalFastRefreshOverlay (at root.js:149)
    in _default (at app.js:165)

我想不通。如果我在这个例子中使用useEffect https://flaviocopes.com/react-update-while-rendering-different-component/ 我会收到这个错误：'isActive' is not defined：

useEffect(() => 
  const isActive = ( isCurrent ) => 
    return isCurrent && setAboutLink(closeLink)
  
)

【参考方案1】：

您需要将isActive 属性更改为isCurrent，或者使用isPartiallyCurrent，正如您从docs 中看到的那样：

Gatsby 的 <Link> 组件带有一个 getProps 属性，可以 对高级样式很有用。它通过你一个对象 以下属性：

isCurrent — 如果 location.pathname 与 <Link> 组件的 to prop isPartiallyCurrent — true 如果 location.pathname 以 <Link> 组件的 to prop 开头 href — prop 的值 location — 页面的 location 对象

您可以在@reach/router’s documentation 上阅读更多相关信息。

相关主题：

Gatsby Link not working with isPartially Active on MDX rendered pages

【讨论】：

感谢您的回答！我试过了，但我仍然遇到同样的问题：警告：“isActive”被分配了一个值，但从未使用过 no-unused-vars 错误：“isActive”未定义警告：无法更新组件（Header）同时渲染不同的组件（Context.Consumer）。要在 Context.Consumer 中找到错误的 setState() 调用，请按照...中所述的堆栈跟踪进行操作

我想你想用isCurrent而不是isActive：gatsbyjs.com/docs/reference/built-in-components/gatsby-link/…