Javascript 已调用React组件，但未正确渲染

我用

VictoryPie

实现了一个饼图。我想在鼠标悬停在每个切片上时显示一个标签

我在

鼠标followTooltip

组件中放入了一条打印语句。当页面加载时，语句已打印五次，这是有意义的，因为有五个切片。然后，当我在馅饼周围移动鼠标时，它会继续打印

但是，它在任何时候都不会显示与切片关联的标签

import React from 'react';
import Grid from '$components/grid';
import { VictoryLegend, VictoryPie, VictoryTooltip, VictoryLabel, Selection } from 'victory';

const creditScoreMakeup = [
    {
        x: 'Payment history',
        y: 35,
        label:
            'The best way for you to improve \nyour credit score is to \nfocus on making payments on time.',
    },
    {
        x: 'Credit utilization',
        y: 30,
        label:
            'You should try to carry little \nto no balance on your credit card \nto lower your credit utilization and \nimprove your credit score.',
    },
    {
        x: 'Length of history',
        y: 15,
        label:
            'A longer credit history provides lenders with more information about how you use credit which helps them predict how you will behave financially long-term.',
    },
    {
        x: 'Credit diversity',
        y: 10,
        label:
            'Having a mix of loans and credit cards \ngives lenders the impression that you can \nhandle various forms of credit responsibly.',
    },
    {
        x: 'Credit inquiries',
        y: 10,
        label:
            'Having many inquiries in a \nshort period of time in your \ncredit history suggests that you \nare in financial trouble and need \na significant amount of money.',
    },
];

class MouseFollowToolTip extends React.Component {

  static defaultEvents = [
    {
      target: "data",
      eventHandlers: {
        onMouseOver: evt => {
          const { x, y } = Selection.getSVGEventCoordinates(evt);
          return {
            mutation: () => ({
              target: "labels",
              x,
              y,
              active: true
            })
          };
        },
        onMouseMove: evt => {
          const { x, y } = Selection.getSVGEventCoordinates(evt);
          return {
            mutation: () => ({
              target: "labels",
              x,
              y,
              active: true
            })
          };
        },
        onMouseOut: () => {
          return { target: "labels", mutation: () => ({ active: false }) };
        }
      }
    }
  ];
  render() {
    console.log("called")
    return <VictoryTooltip {...this.props} pointerLength={0} renderInPortal={false} />;
  }
}


class CreditScore extends React.Component {
  render() {
    return (

        <svg width={1000} height={1000}>
            <VictoryLegend
                standalone={false}
                renderInPortal={false}
                colorScale="green"
                legendWidth={50}
                x={20}
                y={40}
                gutter={20}
                title="Legend"
                centerTitle
                style={{ border: { stroke: 'black' } }}
                data= {creditScoreMakeup.map((a, ind) => {
                    return { name: a.x };
                })}
            />
            <VictoryPie
                    colorScale="green"
                    data={creditScoreMakeup}
                    standalone={false}
                    renderInPortal={false}
                    width={800}
                    height={400}
                    padding-right={100}
                    style={{ parent: { maxWidth: '50%' } }}
                    //labels={d => `${d.label}%`}
                    labelComponent= {<MouseFollowToolTip/>}
                />


            </svg>

    );
  }

}

从“React”导入React；
从“$components/Grid”导入网格；
从“victory”导入{VictoryLegend、VictoryPie、VictoryTooltip、VictoryLabel、Selection}；
常量CreditScoreComponent=[
{
x:‘付款历史’，
y:35，
标签：
“提高信用评分的最佳方法是\n集中精力按时付款。”，
},
{
x:‘信贷使用’，
y:30，
标签：
“您应该尝试在您的信用卡上保留少量的\n余额，\n以降低您的信用利用率并\n提高您的信用分数。”，
},
{
x:‘历史的长度’，
y:15，
标签：
“较长的信贷历史为贷款人提供了更多关于你如何使用信贷的信息，这有助于他们预测你的长期财务行为。”，
},
{
x:‘信用多样性’，
y:10，
标签：
“混合使用贷款和信用卡会给贷款人一种印象，即你可以负责地处理各种形式的信贷。”，
},
{
x:‘信用查询’，
y:10，
标签：
“在您的编辑历史记录中\n短时间内有许多查询表明您\n陷入财务困境，需要\n大笔资金。”，
},
];
类MouseFollowToolTip扩展React.Component{
静态默认事件=[
{
目标：“数据”，
事件处理程序：{
onMouseOver:evt=>{
const{x，y}=Selection.getSVGEventCoordinates（evt）；
返回{
突变：（）=>({
目标：“标签”，
x,，
Y
主动：正确
})
};
},
onMouseMove:evt=>{
const{x，y}=Selection.getSVGEventCoordinates（evt）；
返回{
突变：（）=>({
目标：“标签”，
x,，
Y
主动：正确
})
};
},
onMouseOut:（）=>{
返回{target:“labels”，突变：（）=>（{active:false}）}；
}
}
}
];
render（）{
console.log（“被调用”）
回来
}
}
类CreditScore扩展了React.Component{
render（）{
返回(
{
返回{name:a.x}；
})}
/>
`${d.label}%`}
labelComponent={}
/>
);
}
}

---

我制作了一个

以下是一个跟踪CreditScore组件中鼠标移动的解决方案：

class MouseFollowTooltip extends VictoryTooltip {
  render() {
    return (
      <VictoryTooltip
        {...this.props}
        pointerLength={16}
        renderInPortal={false}
      />
    );
  }
}

class CreditScore extends React.Component {
  state = {
    x: 0,
    y: 0
  };

  updateCoords = e => {
    this.setState({ x: e.clientX, y: e.clientY });
  };

  render() {
    return (
      <svg onMouseMove={this.updateCoords} width={1000} height={1000}>
        <VictoryLegend
          standalone={false}
          renderInPortal={false}
          colorScale="green"
          legendWidth={50}
          x={20}
          y={40}
          gutter={20}
          title="Legend"
          centerTitle
          style={{ border: { stroke: "black" } }}
          data={creditScoreMakeup.map((a, ind) => {
            return { name: a.x };
          })}
        />
        <VictoryPie
          colorScale="green"
          data={creditScoreMakeup}
          standalone={false}
          renderInPortal={false}
          width={800}
          height={400}
          padding-right={100}
          style={{ parent: { maxWidth: "50%" } }}
          labels={d => `${d.label}%`}
          labelComponent={
            <MouseFollowTooltip x={this.state.x} y={this.state.y} />
          }
        />
      </svg>
    );
  }
}

class MouseFollowTooltip扩展了VictoryTooltip{
render（）{
返回(
);
}
}
类CreditScore扩展了React.Component{
状态={
x:0,，
y:0
};
updateCoords=e=>{
this.setState（{x:e.clientX，y:e.clientY}）；
};
render（）{
返回(
{
返回{name:a.x}；
})}
/>
`${d.label}%`}
唇形成分={
}
/>
);
}
}

---

Codesandbox:

也许是这样的？是的，它在perfectlyCool中起作用。我刚刚更新了答案。