React中Mindbody嵌入组件仅刷新后加载问题求助

核心原因 #

Mindbody的嵌入脚本仅在首次页面加载时扫描DOM并初始化<healcode-widget>组件。但React路由跳转属于单页应用（SPA）场景，页面不会重新加载，导致跳转后新增的<healcode-widget>元素无法被脚本自动识别，必须刷新页面触发脚本重新执行才能显示。

解决方法：手动触发Mindbody组件初始化 #

Mindbody的嵌入脚本会暴露全局方法window.HealCode.widgets.load()，用于强制扫描DOM并初始化组件。我们可以通过React的useEffect钩子，在组件挂载或模态框显示时调用该方法。

步骤1：修正Widget组件 #

原Widget组件中直接在useEffect调用组件函数的写法错误，改为在组件挂载时触发初始化：

import { useEffect } from 'react';

const Widget = () => {
  useEffect(() => {
    // 确保Mindbody全局对象存在后，触发组件初始化
    if (window.HealCode?.widgets?.load) {
      window.HealCode.widgets.load();
    }
  }, []);

  return(
   <div>
    <healcode-widget 
      data-version="0.2" 
      data-link-class="healcode-pricing-option-text-link" 
      data-site-id="30089" 
      data-mb-site-id="686934" 
      data-bw-identity-site="false" 
      data-type="pricing-link" 
      data-inner-html="Purchase now" 
      data-service-id="101165" 
    />
   </div>
  )
}

export default Widget;

步骤2：修改PurchaseLanding页面 #

在模态框显示状态变化时，再次触发初始化（确保模态框内的组件被正确识别）：

import * as React from 'react';
import { Stack, Box, Typography, Modal, Backdrop } from '@mui/material';
import ButtonV2 from './ButtonV2';
import Widget from './Widget';

const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  boxShadow: 24,
  borderRadius: 3,
  transition: "5s ease-in-out"
};

const PurchaseLanding = () => {
  const [show, setShow] = React.useState(true);
  const handleClose = () => setShow(false);

  useEffect(() => {
    // 模态框显示时，强制初始化Mindbody组件
    if (show && window.HealCode?.widgets?.load) {
      window.HealCode.widgets.load();
    }
  }, [show]);

  return (
    <div>
        <Modal
        open={show}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
        disableAutoFocus="true" 
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}>
            
        <Box sx={style}>
            <div>
                <img style={{borderRadius: "10px 10px 0 0"}} src="https://res.cloudinary.com/djjb1vyjm/image/upload/v1660541084/1_uxhi8p.png" width="100%" alt="" />
            </div>
            <Box p={2}>
                <Typography align="center" id="modal-modal-title" variant="h5" component="h2">
                <span className='space-font-heavy'>Buy your [10-pack]</span>
                </Typography>

                <Stack pb={3} alignItems="center" justifyContent="center" direction="row" spacing={2}>
                    <Typography px={1} align="center" id="modal-modal-description" sx={{ mt: 2 }}>
                        <span className='space-font-light'>Once completed download the Mindbody app to add, update, and book your workouts!</span>
                    </Typography>
                </Stack>

                <Stack direction="row" justifyContent="center" alignItems="center">
                  <div m={2} className='button-27'><div className='links'><Widget /></div></div>
                </Stack>

            </Box>
        </Box>
        </Modal>
    </div>
  );
}

export default PurchaseLanding

关键说明 #

• 检查window.HealCode是否存在，避免脚本未加载完成时出现报错。
• 依赖show状态触发初始化，确保模态框完全显示后组件才被初始化。

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