如何在 JSX 中使用 amp-state？

Question

我正在 React 项目中创建 Google amp-page，需要在点击后获取 JSON。

A/C 到 amp.dev，我可以使用 amp-state 获取远程数据

作为

<amp-state id="shirts" [src]="'/shirts/sizesAndPrices?sku=' + selected.sku" />

我如何在 JSX 中做同样的事情，因为以这种格式编写 [src] 会导致错误

任何建议都会有所帮助。提前致谢

Answer 1

我不知道这是正确的方法，但我认为，这可以是一个转机如果有更好的方法，或者不推荐，请评论

我需要根据所选选项切换选项的可见性

<amp-selector
    layout="container"
    class="radio-selector"
    on="select: AMP.setState({
    selectedOption: event.targetOption,
})">
        <div option="a_show">Option A</div>
        <div option="b_show">Option B</div>
        <div option="c_show">Option C</div>
</amp-selector>
<div className="options"
    dangerouslySetInnerHTML={{
        __html: `
            <p [class]="selectedOption == 'a_show' ? 'show' : 'hide'" class="show">a</p>
            <p [class]="selectedOption == 'b_show' ? 'show' : 'hide'" class="hide">b</p>
            <p [class]="selectedOption == 'c_show' ? 'show' : 'hide'" class="hide">c</p>
        `
        }}
/>

Answer 2

您可以将 [src] 替换为 data-amp-bind-src。后一种语法是为了 JSX 语法兼容性而引入的。

如何在 JSX 中使用 amp-state？

How to Use amp-state in JSX?

reactjs

jsx

amp-html