在CanvasJS中使用useEffect时自定义导出按钮文本显示为undefined

问题根源 #

你的代码存在两个核心错误导致按钮文本异常：

• 设置style属性时错误用<code>标签包裹模板字符串，导致样式解析失败，影响元素正常渲染。
• 直接访问chart.toolbar并非CanvasJS获取工具栏实例的正确方式，需使用官方提供的get()方法读取配置属性。

修复后的代码 #

import React, { useEffect, useState, useRef } from 'react';
import CanvasJSReact from '@canvasjs/react-charts';

const { CanvasJSChart } = CanvasJSReact;

function Chart({ isLoading, data }) {
  const defaultOptions = {
    animationEnabled: true,
    exportEnabled: true,
    theme: 'dark2',
    // 补充其他配置...
  };

  const [chartOptions, setChartOptions] = useState(defaultOptions);
  const exportButtonRef = useRef(null);

  useEffect(() => {
    if (isLoading) {
      setChartOptions({ ...defaultOptions /* 加载状态配置 */ });
    } else if (data?.length > 0) {
      setChartOptions({ ...defaultOptions /* 数据可用状态配置 */ });
    } else {
      setChartOptions({ ...defaultOptions /* 无数据状态配置 */ });
    }
  }, [isLoading, data]);

  return (
    <CanvasJSChart
      options={chartOptions}
      onRef={(chart) => {
        if (chart?.get("exportEnabled")) {
          // 避免重复创建按钮
          if (exportButtonRef.current) return;

          const toolbar = chart.get("toolbar");
          const exportCSV = document.createElement("div");
          exportCSV.textContent = "Save as CSV";

          // 正确设置初始样式
          exportCSV.setAttribute(
            'style',
            `padding: 12px 8px; background-color: ${toolbar.itemBackgroundColor}; color: ${toolbar.fontColor}; cursor: pointer;`
          );

          // 鼠标悬停样式
          exportCSV.addEventListener('mouseover', () => {
            exportCSV.setAttribute(
              'style',
              `padding: 12px 8px; background-color: ${toolbar.itemBackgroundColorOnHover}; color: ${toolbar.fontColorOnHover}; cursor: pointer;`
            );
          });

          // 鼠标离开样式
          exportCSV.addEventListener('mouseout', () => {
            exportCSV.setAttribute(
              'style',
              `padding: 12px 8px; background-color: ${toolbar.itemBackgroundColor}; color: ${toolbar.fontColor}; cursor: pointer;`
            );
          });

          // 点击事件（补充CSV导出逻辑）
          exportCSV.addEventListener('click', () => {
            console.log("开始导出CSV...");
            // 这里添加你的CSV导出实现代码
          });

          chart._toolBar.lastChild.appendChild(exportCSV);
          exportButtonRef.current = exportCSV;
        }
      }}
    />
  );
}

function App() {
  return <div className="App"><Chart isLoading={true} data={[]} /></div>;
}

export default App;

关键修复说明 #

1. 移除style属性中的<code>标签，确保样式字符串能被正确解析。
2. 使用chart.get("toolbar")获取工具栏实例，保证配置属性可正常读取。
3. 添加exportButtonRef存储按钮实例，防止图表更新时重复创建元素。
4. 替换document.createTextNode为textContent，简化文本设置逻辑。
5. 增加cursor: pointer样式，明确按钮的交互性。

内容的提问来源于stack exchange，提问作者shifoc