Автор оригинала: FreeCodeCamp Community Member.

Проблема”

При использовании статического генератора сайта GATSBY у вас нет базового компонента «приложения» для игры. То, что сказал, нет компонента, который охватывает все ваше приложение, где вы можете поместить свое состояние, которое необходимо хранить между маршрутами/страницами. Gatsby.js автоматически (или автоматически?) Создает маршруты к страницам, которые вы помещаете в папку страницы вашей установки. Или вы создаете страницы программных страниц от вашего gatsby-node.js файл.

Это приведет нас в беду, если нам нужно, например, меню, которое должно быть видно и доступно для взаимодействия на всех наших маршрутах. В моем случае у меня было меню «Форма почты», которое может быть показано или скрыто в правом нижнем углу моего приложения. Этот компонент имеет локальное состояние, которое будет решить, показан ли компонент или нет. На изображении ниже показано меню закрыто и открывается.

Итак … это наша проблема. Как мы можем решать это? Существует ряд способов справиться с этим, но одним из способов, и подход, который я взял, описан ниже.

Решение

Я пойду прямо к точке. GATSBY имеет файл, который называется gatsby-browser.js. Мы можем использовать этот файл, чтобы сделать компоненты обертываться вокруг нашего полного приложения и страницы!

Это здорово!

Этот файл позволяет нам использовать GATSBY Браузер API. Этот API содержит несколько полезных функций, но в частности, в том, что он будет соответствовать нашим потребностям. Это называется wrappageelement. Проверьте код ниже. Это фактический код, который я использовал для приложения моего клиента.

// gatsby-browser.js
// Import the component at the top of the file
import MailWidgetWrapper from './src/components/MailWidgetWrapper';

export const wrapPageElement = ({ element, props }) => (
  {element}
);

Здесь я создал компонент обертки, который будет доступен на всех маршрутах и страницах в GATSBY. Это потрясающе! И просто то, что нам нужно. Компонент обертки Похоже, это выглядит:

// MailWidgetWrapper.js
import React from 'react';

import MailWidget from './MailWidget';

const MailWidgetWrapper = ({ children }) => (
  <>
    {children}
    
  
);

export default MailWidgetWrapper;

Это действительно простой реагирующий компонент, который единственная функция, которая является обертыванием нашего приложения и предоставить ему компонент Mailwidget. Но как делает WRAPPAGEELEDEEMENTEMENT Работа?

wrappageelement.

Во-первых, я также настоятельно рекомендую использовать GATSBYJS.ORG столько, сколько сможете найти ответы на все, что касается GATSBY. Сайт отлично и полно действительно хороших и тщательных объяснений большинства проблем, которые вы столкнетесь.

В нашем случае, если вы посмотрите на код выше, у нас есть два параметра, которые создаются для нас в WRAPPAGEELEDEEMENTEMENT Функция обратного вызова: Элемент и реквизит.

Вы должны быть знакомы с реквизитами, если вы используете React, чтобы им не понадобилось дальнейшее введение. В этом случае реквизиты используются страницей, на которой мы в настоящее время включенным. Нам не нужно использовать какие-либо из этих реквизитов, так как нам нужно только использовать детей (автоматически созданные реакцией).

Mailwidgetwrapper просто делает детей и Mailwidget Отказ Дети – это страница, которую мы отправляем в Mailwidgetwrapper Компонент из gatsby-browser.js файл, как показано ниже. Фактическая страница живет в элемент параметр, и это тот, который мы отправляем в выражение {Element} Отказ

{element}

Так что короче говоря, параметры, которые мы получаем от WRAPPAGEELEDEEMENTEMENT можно суммировать:

Параметр реквизита – это реквизиты с фактической страницы. И параметр элемента является фактической страницей мы находимся на

Компонент Mailwidget.

Моя фактическая Mailwidget Компонент довольно большой и имеет много кода, который здесь не актуален. Вот почему я просто показывая вам простой пример лесов для лесов Mailwidget компонент ниже. Этот компонент на самом деле не актуален для этой задачи объяснения WRAPPAGEELEDEEMENTEMENT функция.

Компонент может практически быть всем, что вам нравится, и не имеет ничего общего с реализацией выше. В моем случае это Mailwidget Отказ Это все зависит от вас, и в каком компонентной комплекте вы должны быть доступны на всех ваших страницах маршрутах.

// MailWidget.js
import React, { useState } from 'react';

const MailWidget = () => {
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisible = () => {
    setIsVisible(!isVisible);
  };

  return (
    

      
        Hide/Show MailWidget
      
      
Hello, I'm your mailwidget
    
  );
};
export default MailWidget;

Кстати, я все на крючках. Я люблю крючки и буду использовать их во всем, что я делаю в реакции! Вот почему я создал свое государство с Уместите крючок в этом. Компонент выше просто использует локальное состояние для решения того, должно ли оно показывать себя или нет.

Заключение

Там у вас есть! Надеюсь, вы узнали, что не сложно иметь компонент, сохраняя его состояние между страницами в GATSBY. И мы все любим gatsby.js не мы? ?

Также, спасибо за чтение этого поста. Я разработчик из Швеции, который любит учить и код. Я также создаю курсы по реагированию и GATSBY онлайн. Вы можете найти меня на UDEMY. Просто найдите Thomas Weibenfalk или подключите меня в Twitter @weibenfalk У меня также есть канал YouTube, я учу бесплатные вещи, проверьте это здесь Отказ