javascript - Skicka en array med referenser i React

Jag skapar en ref-array från en annan komponent, senare behöver jag skicka den till en inre komponent. Att skicka dem som props är meningslöst i den inre komponenten eftersom den returnerar null. Jag försökte vidarebefordra en array av dem, men det fungerar inte heller. Jag sitter just nu fast vid detta och vet inte hur jag ska gå vidare härifrån.

Så frågan är: Vad har jag gjort fel och vad skulle kunna vara en alternativ lösning om min är fel? Hur skulle ni skicka flera referenser till en inre komponent?

Föräldrakomponent:

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>
    );
};

Inre komponent:

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;

Svar #1

Det jag förstår av ditt problem är att {paths} inte renderas när <Knob /> renderas, så därför är din pathRefs en null-array. Dessutom är ref-attributet på en komponent till för att specificera komponentens ref, inte för att skicka information till den.

Enligt min åsikt skulle ett acceptabelt alternativ vara att lägga din pathRefs-array i ditt state och uppdatera den i componentDidMount så att du kan skicka this.state.pathRefs till din <Knob />