React+Vite集成JSXGraph时SVG高度无限大问题求助

在React+Vite项目中集成JSXGraph出现SVG高度无限大的问题，主要源于组件渲染时机错误、容器无明确尺寸约束、未清理board实例这三个核心原因，以下是针对性的修复方案：

1. 利用React useEffect控制JSXGraph生命周期 #

函数组件顶层代码会在每次渲染时重复执行，直接调用initBoard会导致重复创建board实例，且可能在DOM未挂载时执行，引发尺寸计算异常。使用useEffect可以确保DOM挂载后初始化board，组件卸载时销毁实例，避免内存泄漏。

修改后的组件代码：

import { useEffect } from 'react';
import JXG from 'jsxgraph';

function JSXBoard () { 
    const BOARDID = 'board-0';
 
    const input = [
        2, 4,   // point A(x, y)
        12, 6,  // point B(x, y)
        8, 12,  // point C(x, y)
        2       // unit
    ];
    
    useEffect(() => {
        // 确保DOM挂载后初始化board
        const board = JXG.JSXGraph.initBoard(BOARDID, {
            boundingbox: [0, 15, 15, 0],
            axis: true,
            showCopyright: true,
            showNavigation: true
        });

        // 创建图形元素
        const A = board.create('point', [input[0], input[1]], {
            name: '\\(A\\)',
            snapToGrid: true,
            label: {offset: [-25, -10], fontSize: 16}
        });
        const B = board.create('point', [input[2], input[3]], {
            name: '\\(B\\)',
            snapToGrid: true,
            label: {offset: [10, -5], fontSize: 16}
        });
        const C = board.create('point', [input[4], input[5]], {
            name: '\\(C\\)',
            snapToGrid: true,
            label: {offset: [0, 15], fontSize: 16}
        });
        board.create('polygon', [A, B, C], {
            borders: {strokeWidth: 2}
        });

        // 组件卸载时销毁board，避免重复创建和内存泄漏
        return () => {
            board.destroy();
        };
    }, []); // 空依赖数组确保只执行一次初始化

    return (  
        <div id="board-0-wrapper" className="jxgbox-wrapper">
            <div id="board-0" className="jxgbox" data-ar="1 / 1"></div>
        </div>
    )
}

export default JSXBoard;

2. 给容器添加明确的CSS尺寸约束 #

JSXGraph需要容器有明确的宽高才能正确计算SVG尺寸，添加以下CSS样式：

.jxgbox-wrapper {
    width: 600px; /* 可根据需求调整为固定值或百分比 */
    height: 600px;
    overflow: hidden; /* 防止内容溢出导致无限高度 */
}

.jxgbox {
    width: 100%;
    height: 100%;
}

3. 修正JSXGraph导入方式 #

原代码中import { JSXGraph } from "jsxgraph";的导入方式错误，JSXGraph的核心API挂载在默认导出的JXG对象上，需改为：

import JXG from 'jsxgraph';
// 或
import * as JXG from 'jsxgraph';

额外优化（可选） #

如果需要响应式布局，可以在useEffect中监听窗口resize事件，动态调整board尺寸：

useEffect(() => {
    // ...初始化board代码...

    const handleResize = () => {
        board.resize();
    };
    window.addEventListener('resize', handleResize);

    return () => {
        window.removeEventListener('resize', handleResize);
        board.destroy();
    };
}, []);

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