在 Modal框中使用antv/x6报错Ensure the container of the graph is specified and valid

最新推荐文章于 2023-08-01 16:47:27 发布

晶晶吖

最新推荐文章于 2023-08-01 16:47:27 发布

阅读量1.4k

点赞数 1

分类专栏： react antv/x6

本文链接：https://blog.csdn.net/Ljj12013/article/details/118526073

版权

react 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

antv/x6

1 篇文章 0 订阅

订阅专栏

本文探讨了在React中，由于Modal组件的生命周期限制导致初始化时无法获取DOM的问题。通过将DOM结构的获取放在componentDidUpdate函数和setTimeout中，解决了在Modal显示后正确获取DOM结构的需求。

摘要由CSDN通过智能技术生成

一直报错，放到modal外就好了，原因是Modal渲染时机问题。
初始化的时候获取不到是因为一直都在componentDidMount中获取Modal内的dom结构，而目前的react，componentDidMount只会在组件的生命周期内执行一次，它执行的时候Modal组件还未渲染，自然获取不到它其中的DOM结构。

知道原因了，就可以想，既然Modal是visibile属性为true的时候才渲染，那么自然不能在最开始的时候去获取DOM，所以必定要在组件更新的时候去获取，所以可以在componentDidUpdate函数内去获取DOM结构。我试了一下，第一次的时候也是拿不到DOM，感觉是由于动画或者其他原因，但感觉要等到主线程完事再去获取，渲染Modal的方法应该是在主线程里，那么就可以用setTimeout来把获取DOM元素的逻辑放到异步队列中。改为如图。


import * as React from 'react';
import { Modal, Alert } from 'antd';
import { Graph } from '@antv/x6';

class Props {
  visible: any;

  // 确认
  onOk: (a: boolean) => void;

  onCancel: () => void;
}
const data = {
  // 节点
  nodes: [
    {
      id: 'node1',
      x: 40,
      y: 40,
      width: 80,
      height: 40,
      label: 'Hello',
    },
};

class LabelOffLineModal extends React.Component<Props> {
  public static defaultProps: Props = new Props();

  componentDidUpdate() {
    if (this.props.visible) {
      setTimeout(() => {
        const graph = new Graph({
          container: this.container,
          width: 200,
          height: 100,
        });

        graph.fromJSON(data);
      });
    }
  }

  private container: HTMLDivElement;

  refContainer = (container: HTMLDivElement) => {
    this.container = container;
  };

  render() {
    const { visible, onOk, onCancel } = this.props;
    return (
      <div>
        <Modal
          title="题目"
          visible={visible}
          onOk={() => onOk(false)}
          onCancel={() => onCancel()}
          width={'600px'}
        >
            <div className="app-content" ref={this.refContainer} />
          </div>
        </Modal>
        {/* <div className="app-content" ref={this.refContainer} /> */}
      </div>
    );
  }
}

export default LabelOffLineModal;