React中Handlebars模板报错：Missing helper: "__html:" 如何解决？

你遇到的错误是因为Handlebars会解析模板里所有的双花括号表达式，dangerouslySetInnerHTML={{ __html: Description }}里的{{ __html: Description }}被Handlebars误认为是要调用名为__html:的助手函数，但你并没有定义这个助手，所以抛出了Missing helper: "__html:"的错误。

下面是两种可行的解决方式：

方式一：使用Handlebars的raw助手阻止解析 #

raw助手可以让Handlebars跳过对块内内容的解析，把里面的代码原封不动输出给React处理。修改后的模板如下：

const defaultTemplate = `
  ...
  {{#each articles}}
    <div className="article">
      <strong className="article-title">{{ Title }}</strong>
      {{raw}}
      <p dangerouslySetInnerHTML={{ __html: Description }} />
      {{/raw}}
      Read more: <a href={{ Link }}>{{ Link }}</a>
    </div>
    <br />
  {{/each}}
`;

方式二：转义双花括号 #

在Handlebars中，{{{{会被渲染为{{，}}}}会被渲染为}}，所以直接把React属性里的双花括号替换成四花括号即可：

const defaultTemplate = `
  ...
  {{#each articles}}
    <div className="article">
      <strong className="article-title">{{ Title }}</strong>
      <p dangerouslySetInnerHTML={{{{ __html: Description }}}} />
      Read more: <a href={{ Link }}>{{ Link }}</a>
    </div>
    <br />
  {{/each}}
`;

内容的提问来源于stack exchange，提问作者Mark Richman