第一次加载网站时,反应 xarrows 无法正确呈现
react xarrows not render properly when site load first time
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;
我试图想办法修复这个错误。我试图在状态中创建行。我用谷歌搜索了这个,但没有 solution.can 有人帮我解决这个问题
我使用了 useXarrow react-xarrows 钩子并更改了我的代码 this.My 问题是 fixed.But 我不知道如何,为什么它是最好的解决方案?
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;
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;
我试图想办法修复这个错误。我试图在状态中创建行。我用谷歌搜索了这个,但没有 solution.can 有人帮我解决这个问题
我使用了 useXarrow react-xarrows 钩子并更改了我的代码 this.My 问题是 fixed.But 我不知道如何,为什么它是最好的解决方案?
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;