Reactjs目标容器不是DOM元素

问题描述

创建React门户会引发“目标不是DOM元素”错误。我正在渲染React服务器端，我知道我们在节点上没有窗口对象，因此文档对象不存在。

我在线研究并更改了以下反应代码，以使所有文档引用componentDidMount内部的代码行，因为生命周期方法仅在我们位于浏览器上下文中时才起作用。

初始代码

导入...

const secondRoot = document.getElementById（'boot'）;

class测试扩展了React.Component {

constructor(props){
    super(props);
    this.element = document.createElement('div');
}

componentDidMount(){
    secondRoot.appendChild(this.element);
}

componentwillUnmount(){
    secondRoot.removeChild(this.element);
}

render(){
    return createPortal(this.props.children,element);
}

}

更改为

class Test extends React.Component {

    constructor(props) {
        super(props)
    }

    componentDidMount() {
        this.element = document.createElement('div');
        this.secondRoot = document.getElementById('boot');
        this.secondRoot.appendChild(this.element);
    }

    componentwillUnMount() {
        this.secondRoot.removeChild(this.element)
    }

    render() {
        return createPortal(this.props.children,this.element);
    }
}

更改的代码也无法在通常的webpack-dev-server中运行，初始代码有效。我对其进行了更改，以使其可以在CSR和SSR上下文中使用。它在createPortal（this.props.children，this.element）处中断，指出目标元素不是DOM元素。请建议是否有此修复程序，否则，我将不得不退出门户。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）