Question

我了解Gatsby配置文件如何解析和解释markdown文件，但我似乎无法弄清楚如何解析和解释Gatsby配置文件中的内联html。

举个例子，维克托·周（Victor Zhou）也在他的博客中使用了盖茨比（Gatsby），您可以在第6和28行看到： https://github.com/vzhou842/victorzhou.com/blob/master/config.js

我想要一些像这样的字符串：

author: {
    bio: 'I love <a href="https://google.com/">Google</a>'
}

最终呈现为（其中Google是指向“ https://google.com/的链接”）：

I love Google

但是现在它只是呈现为：

I love <a href="https://google.com/">Google</a>

我认为解决方案非常简单明了，但是由于某些原因，我一直很难坚持下去，这确实使我感到困扰。

Answer 1

您可以先对html进行消毒，然后将其注入到元素中。例如：

import sanitize from "sanitize-html"
// For more info: https://www.npmjs.com/package/sanitize-html#what-are-the-default-options

const whereYouWantToSanitize = (props) => {
  const htmlText = "Your <br /> <span class='red'>text</span>"
  const options = {
    allowedTags: ['br', 'span'],
    allowedAttributes: {
      br: ['class']
    }
  } //Check documentation for reference
  return (
    <YourComponentOrElement dangerouslySetInnerHTML={{
      __html: sanitizeHtml(htmlText, options)
    }} />
  )
}

如何在Gatsby配置文件的字符串中呈现html代码？

1 个答案: