Javascript React中传递引用数组

我正在从另一个组件创建一个ref数组，稍后，我需要将其传递给一个内部组件。在内部组件中，将它们作为道具传递是毫无意义的，因为它返回null。我尝试转发一组，但也不起作用。我现在被困在这一点上，我不知道如何从这里开始

所以问题是：我做错了什么？如果我做错了，还有什么替代方案？你们如何将多个引用传递给内部组件

父组件：

const Path: React.FC = () => {

    {...}

    const pathParameters = [
        { d: 'M 500 500 L 800 500', fill: 'transparent', stroke: '#f00' },
        { d: 'M 810 500 L 1105 500', fill: 'transparent', stroke: '#f00' },
        { d: 'M 1110 500 L 1410 500 L 1410 810 L 810 810', fill: 'transparent', stroke: '#f00' },
        { d: 'M 800 810 L 500 810', fill: 'transparent', stroke: '#f00' },
        { d: 'M 805 495 L 805 195', fill: 'transparent', stroke: '#000' },
        { d: 'M 805 195 L 805 495', fill: 'transparent', stroke: '#000' },
        { d: 'M 805 505 L 805 805', fill: 'transparent', stroke: '#000' },
        { d: 'M 805 805 L 805 505', fill: 'transparent', stroke: '#000' }
    ];

    const pathRefs: RefObject<SVGPathElement>[] = [];

    const paths = pathParameters.map((path, index) => {
        pathRefs[index] = useRef(null);
        return (
            <path key={index} ref={pathRefs[index]} d={path.d} fill={path.fill} stroke={path.stroke} />
        );

    return (
        <svg
            onMouseMove={event => dispatch(updateMouseCoordinates(getMouseCoordinates(event)))}
            width='1920'
            height='1080'
            viewBox='0 0 1920 1080'
            xmlns='http://www.w3.org/2000/svg'
        >
            {paths}
            <Knob ref={pathRefs} />
        </svg>
    );
};

const Knob = React.forwardRef((props, ref) => {

    {...}

    return (
        <circle
            onMouseDown={() => dispatch(enableDragging())}
            onMouseUp={() => dispatch(disableDragging())}
            cx={knobCoordinates.x}
            cy={knobCoordinates.y}
            r='30'
        />
    );
});

export default Knob;

const路径：React.FC=（）=>{
{...}
常量路径参数=[
{d:'M 500 L 800 500'，填充：'transparent'，笔划：'#f00'}，
{d:'M 810 500 L 1105 500'，填充：'transparent'，笔划：'#f00'}，
{d:'M 1110 500 L 1410 500 L 1410 810 L 810 810'，填充：'transparent'，笔划：'#f00'}，
{d:'M 800 810 L 500 810'，填充：'transparent'，笔划：'#f00'}，
{d:'M 805 495 L 805 195'，填充：'transparent'，笔划：'#000'}，
{d:'M 805 195 L 805 495'，填充：'transparent'，笔划：'#000'}，
{d:'M 805 505 L 805 805 805'，填充：'transparent'，笔划：'#000'}，
{d:'M 805 805 L 805 505'，填充：'transparent'，笔划：'#000'}
];
常量路径引用：重新对象[]=[]；
常量路径=路径参数.map（（路径，索引）=>{
pathRefs[index]=useRef（null）；
返回(
);
返回(
调度（updateMouseCordinates（getMouseCordinates（事件）））}
宽度='1920'
高度='1080'
viewBox='0 1920 1080'
xmlns=http://www.w3.org/2000/svg'
>
{路径}
);
};

内部组件：

const Path: React.FC = () => {

    {...}

    const pathParameters = [
        { d: 'M 500 500 L 800 500', fill: 'transparent', stroke: '#f00' },
        { d: 'M 810 500 L 1105 500', fill: 'transparent', stroke: '#f00' },
        { d: 'M 1110 500 L 1410 500 L 1410 810 L 810 810', fill: 'transparent', stroke: '#f00' },
        { d: 'M 800 810 L 500 810', fill: 'transparent', stroke: '#f00' },
        { d: 'M 805 495 L 805 195', fill: 'transparent', stroke: '#000' },
        { d: 'M 805 195 L 805 495', fill: 'transparent', stroke: '#000' },
        { d: 'M 805 505 L 805 805', fill: 'transparent', stroke: '#000' },
        { d: 'M 805 805 L 805 505', fill: 'transparent', stroke: '#000' }
    ];

    const pathRefs: RefObject<SVGPathElement>[] = [];

    const paths = pathParameters.map((path, index) => {
        pathRefs[index] = useRef(null);
        return (
            <path key={index} ref={pathRefs[index]} d={path.d} fill={path.fill} stroke={path.stroke} />
        );

    return (
        <svg
            onMouseMove={event => dispatch(updateMouseCoordinates(getMouseCoordinates(event)))}
            width='1920'
            height='1080'
            viewBox='0 0 1920 1080'
            xmlns='http://www.w3.org/2000/svg'
        >
            {paths}
            <Knob ref={pathRefs} />
        </svg>
    );
};

const Knob = React.forwardRef((props, ref) => {

    {...}

    return (
        <circle
            onMouseDown={() => dispatch(enableDragging())}
            onMouseUp={() => dispatch(disableDragging())}
            cx={knobCoordinates.x}
            cy={knobCoordinates.y}
            r='30'
        />
    );
});

export default Knob;

const旋钮=React.forwardRef（（道具，ref）=>{
{...}
返回(
分派（启用拖动（））}
onMouseUp={（）=>dispatch（disabledrading（））}
cx={knobCoordinates.x}
cy={knobCoordinates.y}
r='30'
/>
);
});
导出默认旋钮；

我从您的问题中了解到，

{paths}

在渲染

时不会渲染

，这就是为什么

pathRefs

是空数组的原因。另外，组件上的

ref

属性用于指定组件的ref，而不是向其传递信息

---

在我看来，一个可接受的选择是将

pathRefs

'数组置于您的状态，并在

componentDidMount

上更新它，这样您就可以将

this.state.pathRefs

传递给您的

我不理解您的评论：
在内部组件中作为道具传递它们是没有意义的，因为它返回空。
，返回的是什么
null
？我的意思是将
pathRefs
数组传递给
Knob
组件以供进一步使用。假设我传递该数组时
path
试图通过内部组件（
Knob
）中的props访问它。
props.path
将返回一个
null
数组。