点击markdown gatsbyjs中的Handler答案

【问题标题】：Click Handler in markdown gatsbyjs点击markdown gatsbyjs中的Handler
【发布时间】：2019-03-15 10:47:53
【问题描述】：

有没有办法在 Markdown 文件中添加 onClick 处理程序。我在 gatsbyjs 中使用 markdown 的“创建页面”创建页面，它们包含表格。每行的末尾都有一个“添加”，应该打开一个小模式。我想在那个“添加”中添加一个 OnClick 处理程序。我尝试了所有变体，它看起来像这样。

降价：

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

我在模板组件中添加了一个handleClick函数用于markdown

handleClick() {
        doSmth
      }

或者也许另一种解决方案是添加一个反应组件而不是包含 add 和函数的 div？

【问题讨论】：

标签： markdown gatsby

【解决方案1】：

除了@MarceDev 的建议之外，我认为还有其他一些方法可以解决这个问题：

使用remark custom components 或mdx
将 className 等属性添加到生成的降价中，并将它们定位到 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')
    ...

  }

/* ... */

【讨论】：

【解决方案2】：

不确定我是否完全理解您想要达到的目标，但您可能应该反过来做。也就是说，如果您希望某些页面有一个带有 JS 的表格，您应该将表格放在模板中。然后，您可以使用您在其中使用表格制作的模板调用 createPage。文档会非常彻底地引导您完成整个过程。 https://www.gatsbyjs.org/docs/adding-markdown-pages/

【讨论】：

如果我把它放在模板中，我如何用降价中提供的数据填充表格？无论如何，是否可以从 markdown 中获取某些不在 frontmatter 中的数据。我有很多降价文件，每个文件都包含不同的表格数据