Блог

Мне нужно добавить это, но componentDidMount() не распознается, потому что мой компонент ниже не имеет состояния, и я не уверен, как бы я его расширил или какая-либо лучшая практика была бы здесь?

Ниже приведен мой компонент —

 export default ({ children, meta, title }) => {
  
  return (
    <StaticQuery
      query={graphql`
        query IndexLayoutQuery {
          settingsYaml {
            siteTitle
            siteDescription
            googleTrackingId
            socialMediaCard {
              image
            }
          }
          allPosts: allMarkdownRemark(
            filter: { fields: { contentType: { eq: "postCategories" } } }
            sort: { order: DESC, fields: [frontmatter___date] }
          ) {
            edges {
              node {
                fields {
                  slug
                }
                frontmatter {
                  title
                }
              }
            }
          }
        }
      `}
      render={data => {
        const { siteTitle, socialMediaCard, googleTrackingId } =
            data.settingsYaml || {},
          subNav = {
            posts: data.allPosts.hasOwnProperty('edges')
              ? data.allPosts.edges.map(post => {
                  return { ...post.node.fields, ...post.node.frontmatter }
                })
              : false
          }

          

        return (
          
          <Fragment>
            <Helmet
              defaultTitle={siteTitle}
              titleTemplate={`%s | ${siteTitle}`}
            >
              {title}
              <link href="https://ucarecdn.com" rel="preconnect" crossorigin />
              <link rel="dns-prefetch" href="https://ucarecdn.com" />
              {/* Add font link tags here */}
            </Helmet>

            <Meta
              googleTrackingId={googleTrackingId}
              absoluteImageUrl={
                socialMediaCard amp;amp;
                socialMediaCard.image amp;amp;
                socialMediaCard.image
              }
              {...meta}
              {...data.settingsYaml}
            />

            <GithubCorner url="https://github.com/thriveweb/yellowcake" />

            <Nav subNav={subNav} />

            <Fragment>{children}</Fragment>
            <Footer />
          </Fragment>
        )
      }}
    />
  )
}
  

Мне нужно добавить это, но componentDidMount() не распознается, потому что мой компонент выше не имеет состояния, и я не уверен, как бы я его расширил или какая-либо лучшая практика была бы здесь?

Заранее спасибо!

 async componentDidMount() {
    try {
        const deckdeckgoHighlightCodeLoader = require("@deckdeckgo/highlight-code/dist/loader")
        await deckdeckgoHighlightCodeLoader.defineCustomElements(window);
    } catch (err) {
        console.error(err);
    }
}
  

вы можете сделать функциональный компонент с отслеживанием состояния с помощью перехватов react, подробнее см. в документе reactjs . следующий код может делать то, что componentDidMount делать в классе component

 useEffect(()=>{
//your code here...

},[])
  

вы можете использовать useEffect в react-hook

пример :

  useEffect(() => {
         //code here
    } ,[])
  

В функциональных компонентах вы используете перехваты для доступа к жизненным циклам react. Для побочных эффектов используется перехват useEffect, ваш код будет выглядеть так с помощью useEffect.

Редактировать: вместо этого должно быть так

 import { useEffect } from 'react'

useEffect(() => {
    async function loader() {
        try {
            const deckdeckgoHighlightCodeLoader = require("@deckdeckgo/highlight-code/dist/loader")
            await deckdeckgoHighlightCodeLoader.defineCustomElements(window);
        } catch (err) {
            console.error(err);
        }
    }
    loader();
}, [])