在哪里放置 componentDidMount 以便在 React / Gatsby 中滾動時更改鏈接導航欄顏色？

Question

我的問題與這個問題類似，我知道我需要向導航欄鏈接添加一個 id 並在 componentDidMount（使用 handleScroll 函數）上添加一個事件偵聽器，這對我來說已經很清楚了。

我會事先道歉，因為我可能會問一些愚蠢的事情或我應該已經知道的事情。

問題是，盡管我對 vanilla JS 有經驗，但我對 react 和 gatsby 還是很陌生，所以我不確定在我正在使用的gatsby starter 中放置 componentDidMount 的確切位置。

這個 starter 是一個單頁應用程序，所有部分都加載在索引（主頁）中。 例如，其中一個部分名為 About，我想在其中添加 componentDidMount。 我已將 about.tsx 文件隱藏到 components 目錄中，但我不確定將 componentDidMount 放在哪里。

about.tsx 內容：

 /** @jsx jsx */ import { jsx } from "theme-ui" import Divider from "../elements/divider" import Inner from "../elements/inner" import Content from "../elements/content" import SVG from "./svg" import { UpDown, UpDownWide } from "../styles/animations" // @ts-ignore import AboutMDX from "../sections/about" const About = ({ offset, factor = .99 }: { offset: number; factor?: number }) => ( <div> <Divider bg="divider" clipPath="polygon(0 16%, 100% 4%, 100% 82%, 0 94%)" speed={0.2} offset={offset} factor={factor} /> <Divider speed={0.1} offset={offset} factor={factor}> <UpDown> <SVG icon="box" hiddenMobile width={6} color="icon_blue" left="50%" top="75%" /> <SVG icon="upDown" hiddenMobile width={8} color="icon_darkest" left="70%" top="20%" /> <SVG icon="triangle" width={8} stroke color="icon_darkest" left="25%" top="5%" /> <SVG icon="upDown" hiddenMobile width={24} color="icon_orange" left="80%" top="80%" /> </UpDown> <UpDownWide> <SVG icon="arrowUp" hiddenMobile width={16} color="icon_purple" left="5%" top="80%" /> <SVG icon="triangle" width={12} stroke color="icon_brightest" left="95%" top="50%" /> <SVG icon="circle" hiddenMobile width={6} color="icon_brightest" left="85%" top="15%" /> <SVG icon="upDown" hiddenMobile width={8} color="icon_darkest" left="45%" top="10%" /> </UpDownWide> <SVG icon="circle" hiddenMobile width={6} color="icon_brightest" left="4%" top="20%" /> <SVG icon="circle" width={12} color="icon_darkest" left="70%" top="60%" /> <SVG icon="box" width={6} color="icon_orange" left="10%" top="10%" /> <SVG icon="box" width={12} color="icon_darkest" left="20%" top="30%" /> <SVG icon="hexa" width={8} stroke color="icon_darkest" left="80%" top="70%" /> </Divider> <Content speed={0.4} offset={offset} factor={factor}> <Inner> <AboutMDX/> </Inner> </Content> </div> ) export default About

如果有人能指出我如何將 componentDidMount 添加到這個 about 部分，我很感激？ 提前致謝。

編輯：據我所知，這是一個無狀態的功能組件（對吧？），因此不支持生命周期方法。 但是我不能為了它弄清楚如何將此組件轉換為有狀態組件或如何將其包裝在有狀態容器中。

Answer 1

您在那里有一個功能組件，其中不處理您可能知道的純state （您不需要構造函數等。我將在答案的末尾添加一些文檔）。 由於 React 鈎子，您擁有完全相同的功能。

在您的情況下，由於前面提到的，您將無法擁有componentDidMount()本身，但是，您有一個useEffect鈎子，它添加了完全相同的功能。

const About = ({ offset, factor = .99 }: { offset: number; factor?: number }) => {
 
  useEffect(() => {
    // your function that handles the scroll
  },[]);

  return <div>
    <Divider
      bg="divider"
      clipPath="polygon(0 16%, 100% 4%, 100% 82%, 0 94%)"
      speed={0.2}
      offset={offset}
      factor={factor}
    />
    <Divider speed={0.1} offset={offset} factor={factor}>
      <UpDown>
        <SVG icon="box" hiddenMobile width={6} color="icon_blue" left="50%" top="75%" />
        <SVG icon="upDown" hiddenMobile width={8} color="icon_darkest" left="70%" top="20%" />
        <SVG icon="triangle" width={8} stroke color="icon_darkest" left="25%" top="5%" />
        <SVG icon="upDown" hiddenMobile width={24} color="icon_orange" left="80%" top="80%" />
      </UpDown>
      <UpDownWide>
        <SVG icon="arrowUp" hiddenMobile width={16} color="icon_purple" left="5%" top="80%" />
        <SVG icon="triangle" width={12} stroke color="icon_brightest" left="95%" top="50%" />
        <SVG icon="circle" hiddenMobile width={6} color="icon_brightest" left="85%" top="15%" />
        <SVG icon="upDown" hiddenMobile width={8} color="icon_darkest" left="45%" top="10%" />
      </UpDownWide>
      <SVG icon="circle" hiddenMobile width={6} color="icon_brightest" left="4%" top="20%" />
      <SVG icon="circle" width={12} color="icon_darkest" left="70%" top="60%" />
      <SVG icon="box" width={6} color="icon_orange" left="10%" top="10%" />
      <SVG icon="box" width={12} color="icon_darkest" left="20%" top="30%" />
      <SVG icon="hexa" width={8} stroke color="icon_darkest" left="80%" top="70%" />
    </Divider>
    <Content speed={0.4} offset={offset} factor={factor}>
      <Inner>
        <AboutMDX/>
      </Inner>
    </Content>
  </div>
}

export default About

useEffect基本上是componentDidMount 、 componentDidUpdate和componentWillUnmount 。 如您所見，它接受一個數組作為參數，稱為 deps（依賴項）。 這意味着您可以在那里傳遞一個變量（或變量數組，如props ）來觸發效果（ useEffect ）函數。 如果您傳遞一個空數組，它將表現為componentDidMount ，一旦加載 DOM 樹就會觸發該函數。

請記住，在 Gatsby 中處理滾動可能會很棘手，因為gatsby develop是在瀏覽器端（有一個window對象）呈現的，但gatsby build發生在服務器端（節點端），由於顯而易見的原因，這里沒有window或document 。 您可能需要添加一個條件來繞過它：

  useEffect(() => {
    if(typeof window !== 'undefined'){
       // your function that handles the scroll
    }
  },[]);

我會推薦一些閱讀：

• https://reactjs.org/docs/hooks-intro.html
• https://medium.com/wesionary-team/react-functional-components-vs-class-components-86a2d2821a22
• https://www.twilio.com/blog/react-choose-functional-components#:~:text=Rendering%20JSX,which%20has%20a%20render%20method 。
• https://www.gatsbyjs.com/docs/debugging-html-builds/

Answer 2

Gatsby 應用程序仍然是一個 React 應用程序，所以你在 React 中學到的一切仍然可以在 Gatsby 中使用。
很多人認為 Gatsby 僅用於創建頁面網站，但它的功能遠不止於此。
對於您的問題，一個片段值一千個字，所以這是您的解決方案：

 /** @jsx jsx */ import React, {Component} from "react" import { jsx } from "theme-ui" import Divider from "../elements/divider" import Inner from "../elements/inner" import Content from "../elements/content" import SVG from "./svg" import { UpDown, UpDownWide } from "../styles/animations" // @ts-ignore import AboutMDX from "../sections/about" type AboutProps = { offset: number; factor?: number } export default class About extends Component <AboutProps, {}> { componentDidMoun(){ // do whatever you want here } render(){ const { offset, factor = .99 } = this.props; return( <div> <Divider bg="divider" clipPath="polygon(0 16%, 100% 4%, 100% 82%, 0 94%)" speed={0.2} offset={offset} factor={factor} /> <Divider speed={0.1} offset={offset} factor={factor}> <UpDown> <SVG icon="box" hiddenMobile width={6} color="icon_blue" left="50%" top="75%" /> <SVG icon="upDown" hiddenMobile width={8} color="icon_darkest" left="70%" top="20%" /> <SVG icon="triangle" width={8} stroke color="icon_darkest" left="25%" top="5%" /> <SVG icon="upDown" hiddenMobile width={24} color="icon_orange" left="80%" top="80%" /> </UpDown> <UpDownWide> <SVG icon="arrowUp" hiddenMobile width={16} color="icon_purple" left="5%" top="80%" /> <SVG icon="triangle" width={12} stroke color="icon_brightest" left="95%" top="50%" /> <SVG icon="circle" hiddenMobile width={6} color="icon_brightest" left="85%" top="15%" /> <SVG icon="upDown" hiddenMobile width={8} color="icon_darkest" left="45%" top="10%" /> </UpDownWide> <SVG icon="circle" hiddenMobile width={6} color="icon_brightest" left="4%" top="20%" /> <SVG icon="circle" width={12} color="icon_darkest" left="70%" top="60%" /> <SVG icon="box" width={6} color="icon_orange" left="10%" top="10%" /> <SVG icon="box" width={12} color="icon_darkest" left="20%" top="30%" /> <SVG icon="hexa" width={8} stroke color="icon_darkest" left="80%" top="70%" /> </Divider> <Content speed={0.4} offset={offset} factor={factor}> <Inner> <AboutMDX/> </Inner> </Content> </div> ) } }