如何在函数中用 this 指向 React 组件？

Question

我正在尝试创建一个集成了 D3.js 和 React 的填充量表。首先，请看下面我的代码：

componentDidMount() {
  renderOuterGauge();
  renderInnerGauge();
}

componentDidUpdate() {
  renderOuterGauge();
}

renderInnerGauge = () => {
  const innerGauge = this.svg.append('path')
    .attr('transform', 'translate(60,100)')
    .attr('stroke', 'transparent')
    .attr('d', 'M0,0 l440,-60 v100 h-440 v-40')
    .on('click', function(d) {
      const x = d3.mouse(this)[0];
      const yUP = x / (440 / -60);
      const score = x / 4.38;
      console.log(score);
      this.setState({
        score: score
      })
      d3.event.this.setAttribute('d', `M0,0 l${x},${yUP} v${yUP+40} h${-x} v-40`);
      d3.event.this.setAttribute('fill', 'forestgreen');
    })
}

如上所示，我尝试使用 this.setState 方法动态填充内部仪表，但由于方法调用在闭包中，我无法在 this 上使用 setState .

通常我可以使用箭头函数定义来解决这个问题，但据我所知，为了在仪表中使用 d3.mouse(this) 获得 x 和 y 值，我不能使用箭头功能。对于这种情况，有没有办法将 this 指向反应组件并在同一函数中使用鼠标方法？

Answer 1

你的意思是这样的吗？在进入闭包之前，只需将 this 指向一个变量。

renderInnerGauge = () => {

    const self = this

    const innerGauge = this.svg.append('path')
            .attr('transform','translate(60,100)')
            .attr('stroke','transparent')
            .attr('d','M0,0 l440,-60 v100 h-440 v-40')
            .on('click', function(d){
                const x = d3.mouse(this)[0];
                const yUP = x/(440/-60);
                const score = x/4.38;
                console.log(score);

                // Changed to 'self'
                self.setState({
                    score: score
                })
                d3.event.this.setAttribute('d',`M0,0 l${x},${yUP} v${yUP+40} h${-x} v-40`);
                d3.event.this.setAttribute('fill','forestgreen');
            }) 

    }

Answer 2

如您所知，当您深入研究某些 Javascript 函数时，this 的含义可能会发生变化。但是，该函数保持对作用域高于它的变量的访问。因此，您可以创建一个临时变量来保存 this 的值，然后从 inside 您的函数中引用它，如下所示：

renderInnerGauge = () => {
    const self = this;
    const innerGuage = this.svg.doAllTheThings('foo').on('click', function(d) {
        console.log('self', self); // this is the value of the "outer" this 
    });
}

如何在函数中用 this 指向 React 组件？

How to point React component with this in a function?

javascript

reactjs

d3.js

this

react-component