React Joyride如何调整特定步骤floater的位置？

你当前的配置方式确实存在问题，无法生效主要有三个原因：

• 直接给tooltip、arrow设置top属性会被Joyride内置的Popper.js定位逻辑覆盖，这类定位属性的内置样式优先级更高，手动配置的普通样式会被覆盖不生效
• 配置存在语法层级错误，arrow属于styles的子属性，你的写法中arrow和styles平级，该部分配置本身就不会被Joyride读取
• 如果你要调整的是特定单一步骤的floater位置，floaterProps需要写在对应步骤的配置对象中，写在Joyride组件的根props上会全局生效，无法只作用于单个步骤

正确实现方案 #

方案1：使用官方推荐的offset属性调整（优先选择） #

offset是Popper.js内置的位移配置，兼容性最好，不会破坏Joyride的自适应定位逻辑，配置方式如下：

const steps = [
  // 其他步骤配置
  {
    target: '#目标元素的选择器',
    content: '步骤展示内容',
    // 仅作用于当前步骤的floater配置
    floaterProps: {
      // 格式为 [水平偏移量, 垂直偏移量]，单位为px，负数代表向上/向左偏移
      offset: [0, -200],
      // 其他非定位类的样式可以正常在styles中配置
      styles: {
        tooltip: {
          backgroundColor: '#fff',
          borderRadius: '8px',
          padding: '12px'
        },
        arrow: {
          color: '#fff'
        }
      }
    }
  }
]

方案2：自定义Popper modifier强制修改定位（仅offset无法满足需求时使用） #

如果offset的调整无法满足你的需求，需要自定义定位逻辑，可以通过popperOptions配置自定义modifier实现：

{
  target: '#目标元素的选择器',
  content: '步骤展示内容',
  floaterProps: {
    popperOptions: {
      modifiers: [
        {
          name: 'custom-position',
          enabled: true,
          phase: 'write',
          fn({ state }) {
            // 手动修改floater和arrow的top值，在原有定位基础上向上偏移200px
            state.styles.popper.top = `${parseInt(state.styles.popper.top) - 200}px`
            state.styles.arrow.top = `${parseInt(state.styles.arrow.top) - 200}px`
          }
        }
      ]
    }
  }
}

注意事项 #

• 全局所有步骤的floater位置调整，才需要把floaterProps配置放在<Joyride />组件的根props上
• 优先使用offset调整位移，避免自定义modifier破坏Joyride内置的小屏幕自适应、碰撞检测逻辑

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