如何基于react-xarrows组件实现动态创建箭头？

核心思路是用React状态维护一组箭头的配置信息，然后通过数组遍历的方式渲染所有Xarrow组件，下面是基于你现有代码修改后的实现：

import React, { useState } from 'react';
import Xarrow, { useXarrow, Xwrapper } from 'react-xarrows';
import Draggable from 'react-draggable';

const boxStyle = { border: 'grey solid 2px', borderRadius: '10px', padding: '5px', margin: '10px 0' };

const DraggableBox = ({ id }) => {
    const updateXarrow = useXarrow();
    return (
        <Draggable onDrag={updateXarrow} onStop={updateXarrow}>
            <div id={id} style={boxStyle}>
                {id}
            </div>
        </Draggable>
    );
};

export function V2Example() {
    // 用状态维护箭头数组，每个元素存箭头的起点、终点和唯一标识
    const [arrows, setArrows] = useState([
        { id: 'arrow1', start: 'elem1', end: 'elem2' }
    ]);
    // 用状态维护可拖拽盒子的列表
    const [boxes, setBoxes] = useState([
        { id: 'elem1' },
        { id: 'elem2' }
    ]);
    const updateXarrow = useXarrow();

    // 添加新箭头的示例函数（这里固定连接elem1到新创建的盒子，你可以改成用户自定义选择起点终点）
    const addNewArrow = () => {
        const newBoxId = `elem${boxes.length + 1}`;
        const newArrowId = `arrow${arrows.length + 1}`;
        // 先添加新盒子
        setBoxes(prev => [...prev, { id: newBoxId }]);
        // 再添加连接elem1到新盒子的箭头
        setArrows(prev => [...prev, { id: newArrowId, start: 'elem1', end: newBoxId }]);
        // DOM更新后触发箭头重绘，确保位置计算正确
        setTimeout(updateXarrow, 0);
    };

    return (
        <div style={{ width: '100%', padding: '20px' }}>
            <button onClick={addNewArrow} style={{ marginBottom: '20px' }}>
                添加新箭头（连接elem1到新盒子）
            </button>
            <Xwrapper>
                {boxes.map(box => (
                    <DraggableBox key={box.id} id={box.id} />
                ))}
                {/* 遍历箭头数组渲染所有Xarrow组件 */}
                {arrows.map(arrow => (
                    <Xarrow key={arrow.id} start={arrow.start} end={arrow.end} />
                ))}
            </Xwrapper>
        </div>
    );
}

关键要点说明： #

• 用useState分别维护可拖拽盒子列表和箭头配置数组，每个箭头需要唯一key保证React渲染稳定性
• 添加新箭头后，通过updateXarrow触发重绘，因为DOM结构变化后需要重新计算箭头的位置参数
• 你可以根据实际需求修改addNewArrow逻辑，比如让用户通过点击选择起点和终点，再生成对应的箭头配置

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