Инициализация Фонда с Гэтсби - PullRequest
Новая
       16

Инициализация Фонда с Гэтсби

0 голосов
/ 05 мая 2019

Я пытаюсь использовать Foundation-сайты с Gatsby JS.Я включил "foundation-sites": "^ 6.5.3" в мой package.json.

В одном из моих компонентов я пытаюсь использовать несколько компонентов Foundation, адаптивную навигацию и обмен (загрузка изображений в зависимости от размера экрана).Когда я отрисовываю свою страницу, она поражает или пропускает, будут ли правильно загружаться компоненты Foundation.Иногда правильное изображение загружается, иногда изображения не загружаются.Иногда моя навигация будет отображаться правильно, в других случаях она отображает HTML-разметку без JS.

Приведенный ниже код заставляет меня инициализировать Foundation на componenteneDidMount. 

import React, { Component } from 'react';
import Preheader from './Preheader/Preheader';
import $ from 'jquery';
import 'foundation-sites';

class Header2 extends Component {
	componentDidMount() {
		$(document).foundation();
	}

	render() {
		return (
			<div>

				<img data-interchange="[https://foundation.zurb.com/sites/docs/assets/img/interchange/small.jpg, small], [https://foundation.zurb.com/sites/docs/assets/img/interchange/medium.jpg, medium], [https://foundation.zurb.com/sites/docs/assets/img/interchange/large.jpg, large]" />


				<div className="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
				  <button className="menu-icon" type="button" data-toggle="example-menu"></button>
				  <div className="title-bar-title">Menu</div>
				</div>

				<div className="top-bar" id="example-menu">
				  <div className="top-bar-left">
				    <ul className="dropdown menu" data-dropdown-menu>
				      <li className="menu-text">Site Title</li>
				      <li>
				        <a href="/">One</a>
				        <ul className="menu vertical">
				          <li><a href="/">One</a></li>
				          <li><a href="/">Two</a></li>
				          <li><a href="/">Three</a></li>
				        </ul>
				      </li>
				      <li><a href="/">Two</a></li>
				      <li><a href="/">Three</a></li>
				    </ul>
				  </div>
				  <div className="top-bar-right">
				    <ul className="menu">
				      <li><input type="search" placeholder="Search" /></li>
				      <li><button type="button" className="button">Search</button></li>
				    </ul>
				  </div>
				</div>
			</div>
		)
	}
}

Я также пытался инициализировать Foundation в gatsby-browser.js, используя onInitialClientRender: 

import './src/styles/global.scss';
import './src/styles/composite/bem-components/common/heading/heading.scss';
import './src/styles/composite/bem-components/util.scss';
import $ from 'jquery';

import 'foundation-sites';

export const onInitialClientRender = () => {
	console.log('loaded');
	$(document).foundation();
}

Кажется, ни один из них не работает согласованно.У кого-нибудь есть пример использования Zurb Foundation с Gatsby js?

...