如何在React组件中访问AMP.state实现内容切换功能？

你的错误根源在于：showHiddenContentValue是AMP运行时的宏定义，并非React组件内的JavaScript变量，React编译阶段无法识别这个标识符，因此抛出未定义的错误。

要实现点击按钮显示额外内容的AMP兼容逻辑，不能用React的条件渲染（{!showHiddenContentValue && ...}）来控制元素显示，而是要利用AMP自身的amp-bind绑定语法，直接在DOM元素上通过属性绑定AMP状态值来控制可见性。

修正后的代码示例 #

import React from 'react';

const MyButton = (props) => {
  return (
    <div>
      {/* 初始化AMP状态，用initial设置默认值 */}
      <amp-state id="showHiddenContent" initial='false'></amp-state>
      
      {/* 按钮：状态为false时显示，点击后更新状态为true */}
      <button 
        type="button" 
        on="tap:AMP.setState({showHiddenContent: true})"
        [hidden]="showHiddenContent"
      >
        Show More
      </button>
      
      {/* 额外内容：状态为true时显示 */}
      <div [hidden]="!showHiddenContent">
        <p>Additional content goes here</p>
      </div>
    </div>
  );
};

export default MyButton;

关键说明 #

• 初始化AMP状态时，使用initial属性设置默认值，这是AMP state的标准语法，而非你之前误用的show属性。
• 利用AMP的[hidden]绑定属性，通过AMP状态值的布尔判断控制元素显示/隐藏，这部分逻辑由AMP运行时处理，不会和React的编译流程冲突。
• 确保你的AMP页面已引入amp-bind扩展组件，否则状态绑定无法生效：

  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  

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