4

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 をどのように呼び出す必要がありますか?

4

1 に答える 1