Question

我可以在react应用程序中使用js创建svg及其所有子组件（例如rect等）。但是我不能给一个元素的ref属性。如果我看到生成的源代码，则其ref = [object Object]，因此无法正常工作。该代码在appendChild之后的componentDidMount中调用。因此它应该起作用，因为它已经在DOM中呈现（不是吗？）。 ref与svg元素完美配合（如果未动态创建）。有人可以指引我正确的方向吗？

即使使用React的createElement函数也可以： React.createElement（'rect'，{key：“ myKey”，width：100，height：100，ref：myRef}）但是它不会创建可与appendChild函数一起使用的真实DOM节点（错误消息说明了这一点）。所以我也不能真正使用它。 clipPathRef.current返回包含的clipPath元素，该元素当然可以工作。 rect元素已创建并呈现，只是没有正确的ref属性。

const myRef = React.createRef(); 
    const newElement = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
        newElement.setAttribute("width", 100);
        newElement.setAttribute("height", 100);
        clipPathRef.current.appendChild(newElement);

        newElement.setAttribute("ref", myRef);

        console.log(myRef);//outputs [current null]

Answer 1

此（newElement.setAttribute("ref", myRef)）不起作用，因为React从未将ref道具分配为html属性。当组件安装，更新或卸载时，React会将其从道具中过滤出来并自行管理。

如果您始终创建ref元素，则无需使用<rect>。将新创建的元素放入的变量（例如newElement）与ref基本相同，但范围不限于current属性。

在svg中使用appendChild时，为什么（react-）ref属性不起作用？

1 个答案: