我有以下代码片段呈现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);

10-04 22:32