Question

我有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 的上下文菜单的错误方法，但我将如何实现这一目标？我尝试使用参考

<D3Tree ref={instance => { this.D3tree = instance; }} treeData={this.props.treeData} />

但D3Tree组件是从另一个文件调用的，这就是我得到的原因

this.D3Tree未定义。

我应该如何调用作为React函数的contextmenu？

Answer 1

在您导出组件的位置，像

let instance = null;

class MyComponent extends React.Component {
    componentWillMount() {
        instance = this;
    }
    componentWillUnmount() {
        instance = null;
    }
}

export { MyComponent, instance as myComponentInstance }

您可以使用导入{myComponentInstance}来自＆＃34;文件＆＃34; 它将是你的组件的这个，但只有当它在一个时间内被渲染一个实例时，并且只有空检查条件。

它也不是一种正确的方式，你的代码会被那些支持它的人所憎恨。

第二种方式 - 你可以在React组件的其他地方编写函数像：

const myFunction = (instance, someData) => {
}

class MyComponent extends React.Component {
    myFunction = (someData) => { myFunction(this, someData); }
}

无论如何，两种方式都是反模式，但你可以实现目标。

从JS函数调用React Component函数

1 个答案: