在jsx中渲染小胡子(amp)

Question

我如何在JSX内部渲染amp splash？这里我使用的是GatsbyJS。我已经尝试了这种语法来呈现amp-lith{{{title}}}的输出，但我得到的只是没有文本的自动完成下拉列表。下面是我的文件头.js

header.js

import PropTypes from "prop-types"
import React, { Component, Fragment } from "react"
import {Link} from "gatsby"
import {AMP} from 'react-amp-template'
class Header extends Component {
state = {
keyword: ``,
dataAPI: []
}
search_article = (event) => {
this.setState({
keyword: event.target.value
})
}

render() {
return (
<>
<header
className="ampstart-headerbar fixed flex justify-start items-center top-0 left-0 right-0"
>
<div className="container">
<div
role="button"
aria-label="open sidebar"
on="tap:header-sidebar.toggle"
className="ampstart-navbar-trigger"
id="button-toggle-sidebar"
>
<span className="text-green">☰</span>
</div>
<span id="header-logo"><amp-img src="https://www.ibupedia.com/static/img/ibupedia-logo.png" width="150" height="62" alt="Ibupedia Logo"/></span>
<nav className="navbar navbar-expand-lg navbar-light" id="custom-navbar">
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<Link className="nav-link" style={{color: "#fff"}} to="#">Panduan Covid-19 <span className="sr-only">(current)</span></Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="#" style={{color: "#fff"}}>Konsepsi</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="#" style={{color: "#fff"}}>
Kehamilan
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="#" style={{color: "#fff"}}>Kelahiran</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="#" style={{color: "#fff"}}>Balita</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="#" style={{color: "#fff"}}>Kesehatan</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="#" style={{color: "#fff"}}>Keluarga</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="#" style={{color: "#fff"}}>Infografis</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="#" style={{color: "#fff"}}>Nama Bayi</Link>
</li>
</ul>
<form className="form-inline my-2 my-lg-0">
<Fragment>
<AMP.Script
async 
custom-template="amp-mustache" 
src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"
></AMP.Script>
<amp-autocomplete src="http://localhost:8000/articles/" filter="token-prefix" filter-value="title">
<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>
<template type="amp-mustache" id="amp-template-custom">
<div class="city-item" data-value="{{items}}">
<div>{`{{title}}`}</div>
</div>
</template>
</amp-autocomplete>
</Fragment>
</form>
</div>
</nav>
</div>
</header>
<nav className="navbar navbar-expand-lg" id="second-navbar">
<div className="container">
<Link className="navbar-brand" to="#"><span className="font-bold font-19 grey-text">PANDUAN:</span></Link>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item active">
<Link className="nav-link" to="#"><span className="font-bold text-green font-19">Kehamilan Minggu ke Minggu</span> <span className="grey-text font-bold font-19">|</span></Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="#"><span className="font-bold text-green font-19">Kelahiran</span> <span className="grey-text font-bold font-19">|</span></Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="#"><span className="font-bold text-green font-19">Bayi Umur 1-2 Tahun</span> <span className="grey-text font-bold font-19">|</span></Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="#"><span className="font-bold text-green font-19">Bayi Umur 2-5 Tahun</span></Link>
</li>
</ul>
</div>
</div>
</nav>
<amp-sidebar
id="header-sidebar"
class="ampstart-sidebar px3"
layout="nodisplay"
>
<div className="flex justify-start items-center ampstart-sidebar-header">
<div
role="button"
aria-label="close sidebar"
on="tap:header-sidebar.toggle"
className="ampstart-navbar-trigger items-start"
>
<span class="text-green">✕</span>
</div>
</div>
<nav className="ampstart-sidebar-nav ampstart-nav">
<ul className="list-reset m0 p0 ampstart-label">
<li className="ampstart-nav-item ampstart-nav-dropdown relative">
<amp-accordion
layout="container"
disable-session-states=""
class="ampstart-dropdown"
>
<section>
<header>Panduan</header>
<ul className="ampstart-dropdown-items list-reset m0 p0">
<li className="ampstart-dropdown-item">
<Link to="#" className="text-decoration-none">Kehamilan Minggu ke Minggu</Link>
</li>
<li className="ampstart-dropdown-item">
<Link to="#" className="text-decoration-none">Kelahiran</Link>
</li>
<li className="ampstart-dropdown-item">
<Link to="#" className="text-decoration-none">Bayi Umur 1-2 Tahun</Link>
</li>
<li className="ampstart-dropdown-item">
<Link to="#" className="text-decoration-none">Bayi Umur 2-5 Tahun</Link>
</li>
</ul>
</section>
</amp-accordion>
</li>
<li className="ampstart-nav-item">
<Link className="ampstart-nav-link" to="#">Panduan Covid-19</Link>
</li>
<li className="ampstart-nav-item">
<Link className="ampstart-nav-link" to="#">Konsepsi</Link>
</li>
<li className="ampstart-nav-item">
<Link className="ampstart-nav-link" to="#">Kehamilan</Link>
</li>
<li className="ampstart-nav-item">
<Link className="ampstart-nav-link" to="#">Kelahiran</Link>
</li>
<li className="ampstart-nav-item">
<Link className="ampstart-nav-link" to="#">Balita</Link>
</li>
<li className="ampstart-nav-item">
<Link className="ampstart-nav-link" to="#">Kesehatan</Link>
</li>
<li className="ampstart-nav-item">
<Link className="ampstart-nav-link" to="#">Keluarga</Link>
</li>
<li className="ampstart-nav-item">
<Link className="ampstart-nav-link" to="#">Infografis</Link>
</li>
<li className="ampstart-nav-item">
<Link className="ampstart-nav-link" to="#">Nama Bayi</Link>
</li>
<li className="ampstart-nav-item">
<Link className="ampstart-nav-link" to="#">Tentang Ibupedia</Link>
</li>
<li className="ampstart-nav-item">
<Link className="ampstart-nav-link" to="#">Advertise With Us</Link>
</li>
</ul>
</nav>
</amp-sidebar>
</>
)
}

}
Header.propTypes = {
siteTitle: PropTypes.string,
}
Header.defaultProps = {
siteTitle: ``,
}
export default Header

请帮忙谢谢

Answer 1

在生成的div上，背景颜色和文本颜色都可能设置为白色。尝试设置.city-item { color: '#000'; }