D3ツリーをレンダリングするReactコンポーネントがあります。コード スニペットを以下に示します。
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 の contextmenu を呼び出す間違った方法であることはわかっていますが、どうすればこれを実現できますか? 私はrefsを使ってみました
<D3Tree ref={instance => { this.D3tree = instance; }} treeData={this.props.treeData} />
しかし、D3Treeコンポーネントは別のファイルから呼び出されているため、取得しています
this.D3Tree は定義されていません。
React 関数である contextmenu をどのように呼び出す必要がありますか?