Question

我有以下代码片段呈现D3Tree。 D3Tree是React Component，contextmenu 在之外。为了访问和设置D3Tree的状态，它与D3Tree 绑定。现在在初始加载和右键单击以及状态更改时，D3Tree重新渲染，但是在更改页面和重新加载D3Tree组件时，它不会在右键单击时重新呈现并通过contextmenu更改状态（右键单击d3函数中调用contextmenu为.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
        });
}

Answer 1

上下文菜单函数在类之外，将此函数放在类中，然后将该函数绑定到构造函数中，因为this.contextmenu = this.contextmenu.bind（this）;

Answer 2

制作像contextmenu = contextmenu.bind(D3Tree)这样的绑定。您可以使用contextmenu方法调用.call（接受上下文作为第一个参数）

this.setState（）不会重新渲染

2 个答案: