我有一个 svg map 组件,我想在 Prop 更改时更新它。 在某些路径上添加和减去类...诸如此类。
Snap.svg 似乎是要走的路。如果有人知道更好的方法,我很想听听!
这是我的渲染方法,标有皱眉的两行是我想要在生命周期方法中工作的那些,例如 ComponentWillReceiveProps
render() {
var map = Snap('#map');
Snap.load("images/map.svg", function(data){
if (map) {
map.append(data);
const a2047 = map.select('#a2047'); <---- :(
a2047.attr({stroke:'yellow', strokeWidth:'6px'}) <---- :(
}
})
return (
<div className="map" id="map"/>
);
}
问题是,map
将无法在除此 Snap.load
回调之外的任何其他地方使用。我尝试了几种方法,使用 state
、window.map
、this.map
... 我收到诸如“select is not a”之类的错误函数'。
如何访问 ComponentWillReceiveProps
中的 map ?
或者 Snap.svg 甚至是这个应用程序的方式吗?
最佳答案
您正在使用 Snap.svg 进行直接 DOM 操作,render
和 componentWillReceiveProps
都不是执行该操作的好地方。我建议你在 componentDidUpdate
中这样做在组件渲染后立即调用。但这不会为初始渲染调用。所以我们必须在 componentDidUpdate
和 componentDidMount
中执行此 DOM 操作。为了防止重复相同的代码,您可以将此操作保留在另一个通用类方法中,并从 componentDidUpdate
和 componentDidMount
中调用它。此外,由于此时您的 props 已经更新,您可以在新类方法中使用 this.props
简单地访问它们。
示例:
// @sigfried added to answer his comment below
import Snap from 'snapsvg-cjs';
export default class Mermaid extends Component {
svgRender() {
let element = Snap(this.svgDiv)
Snap.load("images/map.svg", function(data){
if (element) {
element.append(data);
}
});
}
componentDidMount() {
this.svgRender();
}
componentDidUpdate() {
this.svgRender();
}
render() {
return <div ref={d=>this.svgDiv=d} />
}
}
关于reactjs - React 中的 Snap.svg - 如何在生命周期方法中访问 svg?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44340278/