react-xarrows组件首次加载连线无法正确连接元素问题求助

问题根因 #

react-xarrows 组件计算连线坐标依赖起止元素的实际DOM位置，首次加载时页面DOM还未完全挂载渲染完成，img元素、布局样式未完成最终定位，xarrows提前计算位置就会出现偏移；刷新后页面资源存在缓存，DOM渲染速度远快于首次加载，xarrows计算时可拿到正确的元素位置。

修复方案 #

方案1：延迟渲染Xarrow组件，等DOM完全挂载后再生成连线 #

给组件新增isMounted状态，在componentDidMount生命周期钩子中标记组件已挂载，只有挂载完成后才渲染Xarrow，修改后的完整代码如下：

import React from "react";
import Xarrow, { Xwrapper } from "react-xarrows";
import './Diagram.css';

class Diagram extends React.Component{
    constructor(props) {
            super(props);
            this.state = {
              // 新增mounted状态控制Xarrow渲染时机
              isMounted: false,
              lines:[
                    {       
                    start:"test3",
                    end:"test1" ,
                    color:'green',
                    path:'grid',
                    dashness:{ animation: 1 },
                    showHead:false
                    },
                    {       
                    start:"test3",
                    end:"test2" ,
                    color:'green',
                    path:'grid',
                    dashness:{ animation: 1 },
                    showHead:false
                    },
                    {       
                    start:"test3",
                    end:"test4" ,
                    color:'green',
                    path:'grid',
                    dashness:{ animation: 1 },
                    showHead:false        
                    },
                    {       
                    start:"test3",
                    end:"test5" ,
                    color:'green',
                    path:'grid',
                    dashness:{ animation: 1 },
                    showHead:false        
                    },
                    ]
            }
    }
    // DOM挂载完成后更新状态触发连线渲染
    componentDidMount() {
      this.setState({ isMounted: true })
    }

    render(){
            return(
                    <Xwrapper>
                            <div className="bulma-col columns is-2 is-multiline is-mobile">

                                    <div className="column is-4">
                                    <img className="icon is-medium" src='' alt="test1" id="test1"/>
                                    <div>test1</div>
                                    </div> 
                                    
                                    <div className="column is-4"></div>

                                    <div className="column is-4">
                                            <img className="icon is-medium" src='' alt="test2" id="test2" />
                                            <div>test2</div>
                                    </div>
                                    <div className="column is-4"></div>

                            
                                    <div className="column is-4">
                                            <img className="icon is-medium" src='' alt="test3" id="test3" />
                                            <div>test3</div>
                                    </div>
                                    <div className="column is-4"></div>

                                    <div className="column is-4">
                                            <img className="icon is-medium" src='' alt="test4" id="test4" />
                                            <div>test4</div>
                                    </div>
                                    <div className="column is-4"></div>
                                    
                                    <div className="column is-4">
                                            <img className="icon is-medium" src='' alt="test5" id="test5" />
                                            <div>test5</div>
                                    </div>
                                    {/* 仅组件挂载完成后渲染连线 */}
                                    {this.state.isMounted && this.state.lines.map((line,i)=>(<Xarrow key={i} {...line} />))}
                            </div>
                    </Xwrapper>
            )
        
    }
}
export default Diagram;

方案2：添加自动更新属性适配布局变化 #

如果还有偶发偏移，可以给Xarrow加上watchDrag和watchResizing属性，自动监听元素位置、窗口尺寸变化并更新连线：

<Xarrow key={i} {...line} watchDrag={true} watchResizing={true} />

方案3：适配带实际资源的img场景 #

如果img的src为实际资源地址而非空值，可以给所有img绑定onLoad事件，统计加载完成的数量，全部加载完成后再将isMounted设为true即可。

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