如何通过纯JavaScript将React组件嵌入现有SVG文件？

要实现不修改原有SVG文件，动态注入React组件的效果，核心是正确结合SVG命名空间规则与React的组件渲染机制——你之前的问题出在原生DOM无法识别React组件标签，以及createPortal的用法不符合React生命周期要求。以下是两种可行方案：

方案一：使用ReactDOM.render直接挂载（适合简单场景） #

这种方式直接在DOM操作阶段创建SVG容器，再把React组件渲染到容器内：

import React, { Component } from "react";
import ReactDOM from 'react-dom';
import AccordionExampleStyled from "./example";
import { ReactComponent as MySvg } from './images/mysvg.svg';

export class MyView extends Component {
    render() {
        return (
            <div id="App">
                <MySvg id="mySvg" />
            </div>
        );
    }

    componentDidMount() {
        // 1. 获取SVG中要插入组件的父节点
        const svgTargetParent = document.getElementById("nodeToPlaceOver").parentElement;

        // 2. 创建SVG的foreignObject元素（必须用SVG命名空间）
        const foreignObj = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
        foreignObj.setAttribute("x", "130");
        foreignObj.setAttribute("y", "199");
        foreignObj.setAttribute("width", "1000");
        foreignObj.setAttribute("height", "773.8095");

        // 3. 创建XHTML容器（必须用XHTML命名空间，否则React无法正确渲染）
        const reactContainer = document.createElementNS("http://www.w3.org/1999/xhtml", "div");
        reactContainer.id = "accordion-container";

        // 4. 组装容器并插入SVG
        foreignObj.appendChild(reactContainer);
        svgTargetParent.appendChild(foreignObj);

        // 5. 用ReactDOM.render将组件渲染到容器中
        ReactDOM.render(<AccordionExampleStyled />, reactContainer);

        // 可选：添加原生按钮（也可以用React组件代替）
        const btn = document.createElementNS("http://www.w3.org/1999/xhtml", "button");
        btn.id = "tglBtn";
        btn.style.cssText = "position:absolute; left:0; top:738px; width:90px; height:35px";
        btn.textContent = "Click Me!";
        reactContainer.appendChild(btn);
    }
}

方案二：使用React.createPortal（符合React生命周期管理） #

这种方式将Portal作为React元素的一部分返回，更贴合React的状态管理逻辑：

import React, { Component } from "react";
import ReactDOM from 'react-dom';
import AccordionExampleStyled from "./example";
import { ReactComponent as MySvg } from './images/mysvg.svg';

export class MyView extends Component {
    state = {
        renderPortal: false,
        portalContainer: null
    };

    render() {
        const { renderPortal, portalContainer } = this.state;
        return (
            <div id="App">
                <MySvg id="mySvg" />
                {/* 当容器准备好后渲染Portal */}
                {renderPortal && portalContainer && ReactDOM.createPortal(
                    <div>
                        <AccordionExampleStyled />
                        <button 
                            id="tglBtn"
                            style={{
                                position: "absolute",
                                left: "0px",
                                top: "738px",
                                width: "90px",
                                height: "35px"
                            }}
                        >
                            Click Me!
                        </button>
                    </div>,
                    portalContainer
                )}
            </div>
        );
    }

    componentDidMount() {
        const svgTargetParent = document.getElementById("nodeToPlaceOver").parentElement;

        // 创建SVG foreignObject与XHTML容器
        const foreignObj = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
        foreignObj.setAttribute("x", "130");
        foreignObj.setAttribute("y", "199");
        foreignObj.setAttribute("width", "1000");
        foreignObj.setAttribute("height", "773.8095");

        const reactContainer = document.createElementNS("http://www.w3.org/1999/xhtml", "div");
        foreignObj.appendChild(reactContainer);
        svgTargetParent.appendChild(foreignObj);

        // 更新状态触发Portal渲染
        this.setState({
            renderPortal: true,
            portalContainer: reactContainer
        });
    }
}

关键注意事项 #

1. 命名空间必须正确：
   • SVG元素（如foreignObject）必须用http://www.w3.org/2000/svg命名空间创建
   • 内部的HTML容器必须用http://www.w3.org/1999/xhtml命名空间创建，否则浏览器无法识别React渲染的内容
2. React组件不能用原生DOM创建：document.createElementNS只能创建原生标签，React组件必须通过ReactDOM.render或createPortal渲染
3. createPortal需在render中返回：直接在componentDidMount中调用createPortal不会生效，必须作为React元素的一部分由React生命周期管理

内容的提问来源于stack exchange，提问作者cancech