d3'react.js单击d3树节点文本this.props.history.push给出了错误＆quot;“无法读取未定义的属性（Reading＆＃x27; props;）＆quot;

Question

在D3和React.js的帮助下，我能够创建D3层次结构树

我想实现的目标是，单击每个节点文本（例如John，Luke，...）应该路由到每个单击文本的详细页面。

nodes
    .append("text")
    .attr("font-size", "17px")
    .attr("text-anchor", "start")
    .text(function (d) {
        return `${d.data.name}`
    })
    .on("click", function (event, d) {
        this.props.history.push(`/detail/${d.id}`);
});

构造函数

constructor(props) {
    super(props);
    console.log(this.props)                  // there is history in props
    this.state = {
      isClicked: ""
      };
    this.geGraph = this.getGraph.bind(this);  // function where graph code presents

单击节点文本后的 。我遇到了错误。

Uncaught TypeError: Cannot read properties of undefined (reading 'history')

同样，当我在行 this.props.history.push 上进行调试时， this 中没有 props 。

试图跟随此如何使用D3.JS图的React路由器将其重定向到另一个屏幕。仍然有同样的问题。当我尝试获取箭头功能时，

.on("click", (event, d) => this.props.history.push(`/detail/${d.id}`))

它给出了props的问题 und typeerror：无法读取未定义的属性（读取'props'）

我在＆lt; route history = {createBrowserhistory（）}/＆gt; 以及从“历史记录”; import {create browserhistory}。并导出默认withRouter（mygraph）从导入 import {fortrouter}从'react-router-dom'; 。

i m使用路由器版本“ react-router-dom”：“^4.3.1” 和带有类型的基于类的组件。

如何解决此问题。

提前致谢！

Answer 1

您正在使用不同的范围上的范围，现在它的范围可以正常工作，它最好定义单击内部组件的功能并在单击事件上调用它。

或者，您可以将存储在另一个变量内部节点创建范围中并从中使用它。

Answer 2

根据JavaScript dom api 的引用此将是您将单击的DOM元素。

nodes
    .append("text")
    .attr("font-size", "17px")
    .attr("text-anchor", "start")
    .text(function (d) {
        return `${d.data.name}`
    })
    .on("click", function (event, d) {
        // try console.log here
        console.log(this);   // <--- most likely be a DOM element you clicked
        this.props.history.push(`/detail/${d.id}`); // <--- therefore this.props does not exist
});

解决方案1

使用javascript

.on("click", (event, d) => {
        console.log(this);   // <--- this should refer to the parent object
        this.props.history.push(`/detail/${d.id}`);
});

解决方案2

或使用 在构造函数中绑定点击事件处理程序

constructor(props) {
    super(props);
    console.log(this.props)                  
    this.state = {
      isClicked: ""
      };
    this.geGraph = this.getGraph.bind(this);
    this.nodeClickHandler = this.nodeClickHandler.bind(this);
}

function nodeClickHandler (event, d) {
    this.props.history.push(`/detail/${d.id}`);
}

nodes
    .append("text")
    .attr("font-size", "17px")
    .attr("text-anchor", "start")
    .text(function (d) {
        return `${d.data.name}`
    })
    .on("click", this.nodeClickHandler);