GatsbyJS项目中JSX渲染amp-mustache无返回文本问题求助

具体修改点 #

1. 替换原生<template>标签为react-amp-template库提供的<AMP.Template>组件，React处理原生template标签时会转义内部的mustache语法，使用专用组件可保留模板语法完整性
2. 为<amp-autocomplete>添加items="items"属性，指定从接口返回的items数组字段中读取待渲染的列表数据
3. 修正模板中data-value的取值字段，改为你需要回填到输入框的对应字段（这里用{{title}}），避免回填异常
4. 确认本地接口http://localhost:8000/articles/的返回结构符合AMP要求的标准格式：

{
  "items": [
    {"title": "示例文章标题1"},
    {"title": "示例文章标题2"}
  ]
}

修改后的核心代码段 #

<amp-autocomplete 
  src="http://localhost:8000/articles/" 
  filter="token-prefix" 
  filter-value="title"
  items="items"
>
  <div className="input-group">
    <input type="text" className="form-control" placeholder="Cari Artikel"/>
    <div className="input-group-append">
      <span className="input-group-text" id="basic-addon2"><i className="fa fa-search"></i></span>
    </div>
  </div>
  <AMP.Template type="amp-mustache" id="amp-template-custom">
    <div class="city-item" data-value="{{title}}">
        <div>{`{{title}}`}</div>
    </div>
  </AMP.Template>
</amp-autocomplete>

额外注意事项 #

生产环境部署时需要将接口地址替换为正式域名的地址，同时确保接口返回正确的CORS跨域头，否则AMP会拦截请求。

内容的提问来源于stack exchange，提问作者Riski Nurohman