Question

有什么方法可以在markdown文件中添加onClick处理程序。我使用gatsbyjs中的markdown通过“创建页面”创建页面，并且其中包含表格。每行的末尾都有一个“添加”，应打开一个小模式。我想在该“添加”中添加一个OnClick处理程序。我尝试了所有变体，看起来像这样。

降价：

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

并且我在模板组件内添加了一个markClick的handleClick函数

handleClick() {
        doSmth
      }

或者也许另一个解决方案是添加一个react组件，而不是包含add和function的div？

Answer 1

不确定我确切了解您要实现的目标，但是您可能应该反过来这样做。也就是说，如果您希望某些页面具有JS表格，则应将该表格放在模板中。然后，您可以使用在其中创建表格的模板调用createPage。这些文档会非常详尽地引导您完成该过程。 https://www.gatsbyjs.org/docs/adding-markdown-pages/

Answer 2

除了@MarceDev建议的内容外，我认为还有其他几种方法可以解决此问题：

使用remark custom components或mdx
将className之类的属性添加到所生成的markdown并将其定位在componentDidMount上

我认为在React应用程序中，第一种方法是一种更“正确”的方式，它需要花更多的时间来设置，但作为交换，您具有更大的灵活性。

我上面共享的两个链接都有非常详细的设置指南。

相反，第二种方法通常不受欢迎，因为您将直接与dom交互。就个人而言，对于诸如个人博客之类的简单事情，并且看到降价是在您自己的代码之外生成的，我不会太担心。

为此，您可以尝试使用此remark plugin of mine，它为生成的减价提供属性。

您可以执行以下操作：

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

  }

/* ... */

在Markdown Gatsbyjs中单击Handler

2 个答案: