在Google Optimize中编辑React组件 两步表单按钮修改可行性咨询

这个需求完全可以实现，你之前操作未生效是React框架的渲染特性与Google Optimize默认修改逻辑冲突导致的。

React基于虚拟DOM管理页面渲染，当组件状态变更（比如切换表单步骤、auto search字段触发查询）时，会用虚拟DOM的计算结果覆盖真实DOM的改动。你通过Google Optimize可视化编辑器直接修改按钮文本属于对真实DOM的临时修改，一旦对应组件触发重渲染，修改内容就会被React重置为原始值。

• 第一步：给两个按钮设置可区分的稳定定位规则
  优先给两个提交按钮添加唯一的自定义属性方便定位，比如给步骤1按钮加data-form-step="1"，步骤2按钮加data-form-step="2"。如果无法修改项目源码，可通过父级容器的唯一属性组合生成精准选择器，比如步骤1表单容器类名为step-one-form时，按钮选择器为.step-one-form button[type="submit"]，避免和步骤2的按钮定位冲突。
• 第二步：使用Google Optimize自定义JS代码执行修改
  不要使用可视化编辑器的直接文本修改功能，改用自定义JavaScript代码结合DOM变动监听实现修改，避免被React重渲染覆盖，参考代码如下：

  // 监听全局DOM变动，确保按钮每次渲染后都会同步修改文本
  const formBtnObserver = new MutationObserver(() => {
    // 修改步骤1按钮文本
    const step1Btn = document.querySelector('button[data-form-step="1"]');
    if (step1Btn && step1Btn.innerText !== '步骤1自定义按钮文本') {
      step1Btn.innerText = '步骤1自定义按钮文本';
    }
    // 修改步骤2按钮文本
    const step2Btn = document.querySelector('button[data-form-step="2"]');
    if (step2Btn && step2Btn.innerText !== '步骤2自定义按钮文本') {
      step2Btn.innerText = '步骤2自定义按钮文本';
    }
  });
  formBtnObserver.observe(document.body, { childList: true, subtree: true });
  

• 第三步：调整代码触发时机
  在Google Optimize的变体设置中，将上述自定义代码的触发规则设置为DOMContentLoaded事件触发，也可以分别为两个按钮设置「当元素存在时」的独立触发规则，避免代码提前执行找不到对应元素。
• 第四步：完整流程验证
  测试时需要走完整的表单操作流程：输入auto search字段内容、点击提交切换到步骤2、在步骤2操作auto search字段，确认两个步骤的按钮文本都不会被重置，修改稳定生效。

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