ChartJS 如何在react中引用forwardRef元素的当前状态？

xwmevbvl 于 2023-10-18 发布在 Chart.js

关注(0)|答案(1)|浏览(147)

我正在尝试从charts.js图表创建一个.png图像。
下面是我们讨论的代码片段：

const DSampleChart = () => {
  let ref = useRef(null);

  const downloadImage = useCallback(() => {
    const link = document.createElement("a");
    link.download = "chart.png";
    link.href = ref.current.toBase64Image();
    link.click();
  }, []);

  return (
    <div>
      <button type="button" onClick={downloadImage}>
        Download
      </button>
      <div>
        <WbrChart ref={ref} data={chartonedata} />
      </div>
    </div>
  );
};

它在抱怨toBase645Image()，但我认为这是因为ref.current是空的。ref是空的，因为它是在函数中引用的，显然，你不能在函数中使用ref？
警告：功能组件不能被指定参考。尝试访问此引用将失败。你的意思是使用React.forwardRef（）吗？
但我不熟悉forwardRef，最后越碰越乱。
Here is a sandbox给你玩。

chart.js

来源：https://stackoverflow.com/questions/77145671/how-can-i-ref-the-current-state-of-an-element-with-forwardref-in-react

1条答案

按热度按时间

zbdgwd5y1#

在JSX中，默认情况下只有官方标签可以接受ref属性。组件必须由forwardRef函数创建才能接受ref属性。
下面是你应该做的WbrChart使其工作：

import React, { forwardRef } from "react";

const WbrChart = forwardRef(({ data }, ref) => {
  return <Line ref={ref} options={options} data={data} />;
});

WbrChart.displayName = "WbrChart" // you must set a `displayName` for debugging cases manually, because `forwardRef` is not smart enough to get it from the component name

现在，你可以像之前那样传递ref prop：

<WbrChart ref={ref} data={chartonedata} />

你也可以在我的克隆代码沙箱中检查和测试它：https://codesandbox.io/s/damp-tdd-wnqnd5?file=/src/App.js

赞(0）回复(0）举报 2023-10-18

我来回答

ChartJS 如何在react中引用forwardRef元素的当前状态？

1条答案

相关问题

热门标签

最新问答