Question

我要从另一个组件创建一个 ref数组，稍后，我需要将其传递给内部组件。在内部组件中将它们作为prop传递是没有意义的，因为它返回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;

Answer 1

我从您的问题中了解到，{paths}在呈现时<Knob />未被呈现，因此这就是您的pathRefs为空数组的原因。另外，组件上的ref属性用于指定组件的引用，而不是将信息传递给它。

我认为，可以接受的选择是将pathRefs'数组置于您的状态并在componentDidMount上对其进行更新，这样您就可以将this.state.pathRefs传递给{ {1}}

在React中传递引用数组

1 个答案: