Нажмите Обработчик в уценке gatsbyjs - PullRequest
Новая
       9

Нажмите Обработчик в уценке gatsbyjs

0 голосов
/ 14 марта 2019

есть ли способ добавить обработчик onClick в файл уценки.Я создаю страницы с «создавать страницы» из уценки в gatsbyjs, и они содержат таблицы.каждая строка имеет «добавить» на конце, который должен открыть небольшой модальный.И я хотел бы добавить обработчик OnClick к этому «добавить».Я перепробовал все варианты, и это выглядело примерно так.

Уценка: 

| f   | sef | wef  | df  |  <div onClick={this.handleClick}> add </div> |

, и я добавил функцию handleClick внутри компонента шаблона для уценки 

handleClick() {
        doSmth
      }

Илиможет быть, другим решением было бы добавить компонент реагирования вместо div, который содержит add и функцию?

Ответы [ 2 ]

1 голос
/ 15 марта 2019

Кроме того, что предложил @MarceDev, я думаю, что есть несколько других способов сделать это:

  1. Использование замечание пользовательских компонентов или MDX
  2. Добавьте атрибут с именем className к сгенерированной уценке и наведите его на componentDidMount

Я думаю, что в приложении React первый подход - более «правильный» способ сделать это, его настройка требует немного больше, но взамен вы получаете гораздо больше гибкости.

Обе ссылки, которыми я поделился выше, имеют довольно подробное руководство по настройке.

Второй подход, напротив, часто не одобряется, потому что вы будете напрямую взаимодействовать с домом. Лично для чего-то простого, такого как личный блог, и того, что уценка генерируется вне вашего собственного кода, я бы не был слишком обеспокоен.

Для этого вы можете попробовать мой примечательный плагин , который придает атрибуты сгенерированной уценке.

Вы можете сделать что-то вроде: 

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
 +        {
 +          resolve:`gatsby-remark-default-html-attrs`,
 +          options: {
 +            "table": "table-class", // <table class="table-class">

              // custom attributes
 +            "table": {
 +              className: "table-class",
 +              style: "color: red;",
 +            },

              // select only the first table of a parent node
 +            "table:first-of-type {
 +              className: "table-class",
 +              ...
 +            }
 +          }
 +        }
        ],
      }
    }

Затем укажите имя этого класса на componentDidMount: 

// template.js

/* ... */

  componentDidMount() {
    if (typeof window == 'undefined') return;
    const $table = document.querySelector('.table-class')
    ...

  }

/* ... */
0 голосов
/ 14 марта 2019

Не уверен, что я точно понимаю, чего вы пытаетесь достичь, но вы, вероятно, должны делать это наоборот.То есть, если вы хотите, чтобы на определенных страницах была таблица с JS, вы должны поместить таблицу в шаблон.Затем вы можете вызвать createPage с шаблоном, который вы создали с таблицей в нем.Документы проведут вас через процесс довольно тщательно.https://www.gatsbyjs.org/docs/adding-markdown-pages/

...