Блог

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

Markdown:

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

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

 handleClick() {
        doSmth
      }
  

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

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

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

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

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

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

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

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

     {
      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')
    ...

  }

/* ... */

  

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