Question

我正在为我的react应用程序创建导航栏（确切地说是使用gatsbyjs）。在导航栏中，我在componentDidMount的导航栏组件中初始化了一个字幕。

它可以按预期工作，但是在每次更改路由componentDidMount后都会再次运行，这会导致每次页面更改的选取框速度加快，从而使其运行得越来越快。

这是预期的行为吗？如果是这样，我如何确保该脚本仅运行一次？

navbar.js

import React from 'react';
import { Link } from 'gatsby';
import styles from '../styles/navbar.module.css';
import NewsMarquee from './newsMarquee';
import Marquee3k from 'marquee3000';

const topLevelNav = [
  {
    href: '/news',
    label: <NewsMarquee/>,
    extraClass: styles.navLinkNews,
    mediaQueryClass: styles.navLinkHiddenSmall,
  },
];

export default class Navbar extends React.Component {

  componentDidMount() {
    Marquee3k.init();
  }

  render() {
    return (
      <div>
        <header className={styles.navbar} role="banner">
          <nav className={styles.nav}>
            {topLevelNav.map(({ href, label, extraClass = '', mediaQueryClass = '' }) => (
              <Link
                key={label}
                to={href}
                className={`${styles.navLink} ${extraClass} ${mediaQueryClass} ${menuItemsHidden}`}
                activeClassName={styles.navLinkActive}
              >
                {label}
              </Link>
            ))}
          </nav>
        </header>
      </div>
    )
  }
}

newsMarquee.js

import React from 'react';
import { StaticQuery, graphql } from "gatsby";
import styles from '../styles/newsMarquee.module.css';

export default () => (

  <StaticQuery
    query={graphql`
      query {
        allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC } limit: 10) {
          totalCount
          edges {
            node {
              id
              frontmatter {
                title
                date(formatString: "YYYY.MM.DD")
              }
              fields {
                slug
              }
            }
          }
        }
      }
    `}
    render={data => (
      <div className={`marquee3k ${styles.marquee}`}>
      <div>
      {data.allMarkdownRemark.edges.map(({ node }) => (
        <span className={styles.marqueeItem} key={node.id}>
          {node.frontmatter.date} {node.frontmatter.title}
        </span>
      ))}
      </div>
      </div>
    )}
  />
)

Answer 1

自从我使用GatsbyJS以来，我就使用了V1中的this plugin，这使我的布局组件可以在页面之间持久保存。

gatsby-plugin-layout
该插件可以添加位于页面组件上方并在页面更改后仍然存在的组件。

这可以帮助：

页面更改之间的持久布局，例如动画导航
浏览页面时的存储状态
使用componentDidCatch进行自定义错误处理
使用React Context将其他数据注入页面。

此插件重新实现了gatsby @ 1中布局组件的行为，该组件已在版本2中删除。

在componentDidMount中初始化脚本–运行所有路由更改

1 个答案: