postMessage 内嵌传参

注意点

1. 外部页面初始化之后 , 发送消息到我们系统 , 我们再给他们数据 , 不要使用onload (看个人需求)
2. 组件注销记得注销事件
3. 注销的事件确保和注册的时候是同一个函数引用 , 用useCallback包裹 , 并且不要添加依赖项 , 函数内部要访问变量使用ref

原始代码:

  // 订单分配货款 iframe
  const orderParagraphRef = useRef(null);
  // 订单分配货款参数
  const paragraphPointsRef = useRef({});

  // 和研发协商 设置变量 控制传参
  let monetFlag = false

  // 订单分配货款
  useEffect(() => {
    return () => {
      window.removeEventListener('message', handleorderParagraph);
    };
  }, []);
   const handleorderParagraph = useCallback(e => {
    if (e.data.type === 'getData') {
      moneyFlag = true;
      orderParagraphRef.current?.contentWindow.postMessage(
     // 要传递的数据

        },
     // 要传递数据的url

      );
    }
  }, []);

      // 订单分款
      paragraphPoints: () => {
           // 这里我写的没有勾选数据 提醒用户需要勾选数据才可以进行下面操作
        } else {
          // 设置真实数据传递
            paragraphPointsRef.current = ???
          if (moneyFlag) {
            orderParagraphRef.current?.contentWindow.postMessage(
              {
              // 这里设置要传递的数据
    
              },
              // 这里设置要给哪个url传递数据, 写url地址

            );
          }
          setTimeout(() => {
            const iframe = document.getElementById('clientMoneyId');
            iframe.onload = () => {
              window.addEventListener('message', handleorderParagraph, false);
            };
          }, 500);
          // 订单分款对话框显示
          setParagraphPoints(true);
        }
      },

    {/* 订单分款弹出层 */}
      <Modal
        title="订单分款"
        visible={paragraphPoints}
        onCancel={handleCancel}
        footer={null}
        destroyOnClose
        width={'80%'}
        bodyStyle={{ padding: 0 }}
      >
        <iframe
          src={`url`}
          id="clientMoneyId"
          width="100%"
          height="600"
          ref={orderParagraphRef}
        ></iframe>
      </Modal>

这里我超级超级疑惑 , 我组件写了destroyOnClose属性 每次关闭的时候 销毁组件 再次打开重新获取数据发送过去 但是 与其他页面人员交流中 他们让我设置变量  第一次监听到事件 变量设置为true 发送数据 过后每次打开窗口变量为true 便发送数据 , 实际证明这样每次发送的也是新的数据 好疑惑 好疑惑   后面和其他页面人员沟通 得到解惑 不用销毁是因为他页面渲染完成了，你直接可以给我派发新数据，他接收刷新页面。