首次加载站点时，反应 xarrows 无法正确呈现

Question

When site load first 线条没有正确连接到给定的元素

After reload page once 线条正确连接到给定元素

这是我的 diagram.js 组件

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

class Diagram extends React.Component{
    constructor(props) {
            super(props);
            this.state = {
              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        
                    },
                    ]
            }
    }

    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.lines.map((line,i)=>(<Xarrow key={i} {...line} />))}
                            </div>
                    </Xwrapper>
            )
        
    }
}
export default Diagram;

我试图想办法解决这个错误。我试图在状态中创建线条。我用谷歌搜索了这个但没有任何解决方案。有人可以帮我解决这个问题

Answer 1

我使用 useXarrow react-xarrows 钩子并像这样更改了我的代码。我的问题已解决。但我不知道如何，为什么以及它是最好的解决方案吗？

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

const Diagram =()=>{
      const 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        
                },
      ]
      return(
            <div onLoad={useXarrow()} 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>
                                {lines.map((line,i)=>(<Xarrow key={i} {...line} />))}
        </div>
        )
}
export default Diagram;