我有一个React组件,用于渲染D3树形结构。以下是代码片段:
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);//renderTree is Javascript function
}
}
contextmenu(node)
{
this.setState = {
style_popup: {
top: d3.event.clientY,
left: d3.event.clientX,
position: 'absolute'
},
render_on_click: true
}
}
render()
{
// Render a blank svg node
return (
<div id="tree">
<div id="tree-container" ref={(tree) =>
{
this.tree = tree;
}}>
</div>
{
(this.state.render_on_click) ? <PopUp popup_style={this.state.style_popup}/> : null
}
</div>
);
}
在renderTree()
函数内(不是React函数),我有以下代码片段:
function renderTree(this.props.treeData, mountNode, this.props.nodeName)
{
//Some code.
.on('click',contextmenu);
}
我知道从JS中调用React的上下文菜单的方法不正确,但是我该如何实现呢?我尝试使用引用(refs)。
<D3Tree ref={instance => { this.D3tree = instance; }} treeData={this.props.treeData} />
但是D3Tree组件是从另一个文件调用的,这就是我收到
this.D3Tree未定义的原因。
我应该如何调用contextmenu,它是一个React函数?
this.contextmenu = contextmenu.bind(this)
,为什么我还要在 renderTree 函数中再次设置contextmenu = contextmenu.bind(D3Tree)
呢? - Akash Sateesh