使用React Signals动态添加SVG元素不渲染问题求助

问题根源 #

你代码里的核心问题有两个：

• Signal响应式触发逻辑：用push原地修改数组，Signals不会检测到这种变化——它只在你替换整个值的时候才会触发组件重新渲染。
• 直接存储React元素：把JSX元素存在Signal里不符合React数据流最佳实践，也容易导致更新逻辑混乱。

修复步骤 #

1. 存储数据而非JSX元素：把SVG元素的属性（位置、尺寸等）以对象形式存在Signal数组中，而不是直接存<rect>元素。
2. 创建新数组触发更新：添加新元素时，通过扩展运算符创建新数组，替换Signal的原有值，这样Signals能检测到变化并触发重渲染。
3. 渲染时生成JSX：在SVG中遍历数据数组，动态生成对应的<rect>元素。

修改后的完整代码 #

import { useSignal } from '@preact/signals-react';
import { useSignals } from '@preact/signals-react/runtime';

const FamiliezBewerken = () => {
    useSignals();

    // 存储SVG元素的配置数据，而非JSX元素
    const personElementsData = useSignal([]);

    const addPersonElement = () => {
        const newPersonData = {
            key: Math.random().toString(), // 用字符串类型的唯一key
            x: Math.random() * 100,
            y: Math.random() * 100,
            width: 120,
            height: 60,
            fill: "white"
        };
        // 创建新数组替换原数组，触发Signal响应式更新
        personElementsData.value = [...personElementsData.value, newPersonData];
    };

    return (
        <div>
            <button onClick={addPersonElement}>Add Person Element</button>
            <svg width="100%" height="100%">
                {/* 静态测试元素 */}
                <rect x={Math.random() * 100} y={Math.random() * 101} width={120} height={60} fill="white" />
                {/* 遍历数据生成动态SVG元素 */}
                {personElementsData.value.map(data => (
                    <rect
                        key={data.key}
                        x={data.x}
                        y={data.y}
                        width={data.width}
                        height={data.height}
                        fill={data.fill}
                    />
                ))}
            </svg>
        </div>
    );
};

export default FamiliezBewerken;

额外说明 #

• 静态元素能显示是因为组件初始渲染时会生成它，而动态元素因为原代码没触发Signal更新，组件不会重新渲染，所以看不到新增的元素。
• 用字符串类型的key比直接用Math.random()生成的数字更稳妥，避免React的key警告。

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