javascript - 首次加载网站时,反应 xarrows 无法正确呈现
问题描述
当站点加载第一 行未正确连接到给定元素时
重新加载页面后,一旦 行正确连接到给定元素
这是我的 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;
我试图想办法解决这个错误。我试图在状态中创建线条。我用谷歌搜索了这个但没有任何解决方案。有人可以帮我解决这个问题
解决方案
我使用 useXarrow react-xarrows hook 并像这样更改了我的代码。我的问题已解决。但我不知道如何,为什么以及它是最好的解决方案吗?
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;
推荐阅读
- java - Spring Boot + JPA:@Transactional 注释:回滚不起作用
- mysql - 尝试在 mysql 上更新 root 密码或创建新用户给我 /mysql/user.MYD 错误
- javascript - 将数组推入数组并使用它会抛出 NaN
- python - How do I write a Django ORM query for the reverse relationship in a one-to-many relationship?
- javascript - 如何在 Javascript 中访问和遍历 Java 集合
- mysql - MySQL 时间戳默认值无效
- bash - 在一个循环中重命名多个文件
- html - 如何为每组内联块开始一个新行?
- node.js - nodejs mssql 事务池
- python - Python:不同的对象获得相同的ID