我有以下代码片段呈现D3Tree。 D3Tree是React组件,而contextmenu
在React之外。为了访问和设置D3Tree的状态,将其绑定到D3Tree。现在,在初始加载,右键单击和状态更改时,D3Tree重新呈现,但是在页面更改和重新加载D3Tree组件时,它不会在右键单击和状态更改时通过contextmenu
重新呈现(contextmenu右键单击d3函数中的.on('contextmenu',contextmenu)
)。有人可以解释一下这种不良行为以及该怎么办。向下滚动以获取代码。
(如果我重新加载D3Tree组件,然后右键单击节点,即使状态更改,它也不会重新渲染)
export default class D3Tree extends BaseWidget {
constructor(props)
{
super(props);
this.state = {
style_popup : {
top : 90,
left : 90,
position : 'absolute'
},
render_on_click : false
}
contextmenu = contextmenu.bind(this);
}
componentDidMount(){
var mountNode = ReactDom.findDOMNode(this.tree);
// Render the tree usng d3 after first component mount
if (this.props.treeData) {
renderTree(this.props.treeData, mountNode, this.props.nodeName);
}
}
shouldComponentUpdate(nextProps, nextState){
var mountNode = ReactDom.findDOMNode(this.tree);
// Delegate rendering the tree to a d3 function on prop change
if (this.props.treeData != nextProps.treeData) {
renderTree(nextProps.treeData, mountNode, this.props.nodeName);
}
return true;
}
render() {
return (
<div id="tree">
<div id ="tree-container" ref={(tree) => { this.tree = tree; }}>
</div>
{
(this.state.render_on_click) ? <div><PopUp popup_style = {this.state.style_popup} /></div> : null
}
</div>
);
}
}
function contextmenu(node)
{
this.setState({
style_popup : {
top : d3.event.clientY,
left : d3.event.clientX,
position : 'absolute'
},
render_on_click : true
});
}
最佳答案
上下文菜单函数在类之外,将其放在类中,然后将该函数绑定到构造函数中,如下所示:contextmenu = this.contextmenu.bind(this);