0

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

即使使用 React 的 createElement 函数也可以： React.createElement('rect', {key: "myKey", width: 100, height: 100, ref: myRef}) 但它并没有创建真正的 DOM 节点，可以与 appendChild 函数一起使用（错误消息说明了这一点）。所以我也不能真正使用它。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]
4

1 回答 1

0

这个 ( newElement.setAttribute("ref", myRef)) 不起作用，因为 React 从不将refprop 分配为 html 属性。React 将其从 props 中过滤出来，并在组件安装、更新或卸载时自行管理。

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

于 2019-06-06T06:31:23.443 回答