Использование клиентского скрипта в GatsbyJs (приоритетная навигация) - PullRequest
0 голосов
/ 16 апреля 2019

Я конвертирую статический сайт в gatbsyjs, есть плагин js, который я не могу заставить работать: https://github.com/gijsroge/priority-navigation. Это сценарий только для клиента, поэтому я использую альтернативную процедуру установки для обхода узла.

Это моя процедура:

  • В html.js я загружаю скрипт из «статической» папки, затем инициализирую его.
<script src={withPrefix('priority-nav.js')} />
        <script
            dangerouslySetInnerHTML={{
                __html: `
    console.log('start!');

    var nav = priorityNav.init({});

    console.log(nav);
    console.log('end!');
        `,
            }}
        />
      {props.postBodyComponents}
      </body>
  • my page.js довольно прямолинейно:
import React from "react"
import '../../node_modules/priority-nav/dist/priority-nav-core.css'

const IndexPage = () => (
      <nav className="nav-wrapper">
        <ul className="nav-ul" style={{display:"inline-block", border: "1px solid blue"}}>
          <li style={{display:"inline-block", padding:"0 100px", border: "1px solid red"}}>list item</li>
          <li style={{display:"inline-block", padding:"0 100px", border: "1px solid red"}}>list item</li>
          <li style={{display:"inline-block", padding:"0 100px", border: "1px solid red"}}>list item</li>
          <li style={{display:"inline-block", padding:"0 100px", border: "1px solid red"}}>list item</li>
        </ul>
      </nav>
)

export default IndexPage

В визуализированном html загружаются файлы .js и .css. Но на элемент nav скрипт воздействует.

Должно ли что-то подобное работать?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...