时间戳

首页 > 解决方案 > React 代码“目标容器不是 DOM 元素”的问题。

javascript - React 代码“目标容器不是 DOM 元素”的问题。

问题描述

我正在学习反应并且遇到了一个特定的错误。

如果我尝试将我的Login和Register类放入索引文件的渲染函数中以输出它，我会收到错误消息：

目标容器不是 DOM 元素。

如果我的渲染只有登录或注册，它工作正常，但是当我将它们组合到一个渲染函数中时，它会给出错误，我不确定如何解决这个问题。

我尝试删除一个或另一个以仔细检查它是否成功编译并且确实如此，但是当我添加第二个类时它失败了。

我的Index.js文件中渲染函数的代码是；

import React from "react";
import { render } from "react-dom";
import Login from "./Login";
import Register from "./Register";


render(

  <Login />, 
  <Register />,
  document.getElementById("root")
);

我的登录文件的输出代码是；

render() {
        return (
            <form>
            <pre>{JSON.stringify(this.state)}</pre>
            <button onClick={ event => this.login(event) }>Login</button>
            <pre {...(this.state.message.isEmpty ? "hidden" : "")}>
            {this.state.message}
            </pre>
            </form>

        );
    }
}

export default Login;

并且注册的输出代码几乎与登录相同，除了“登录”的行是“注册”

我需要帮助以找出问题所在，以便我可以解决它。这样，我可以让我的html文件显示两个按钮而不显示错误

目标容器不是 DOM 元素

谢谢你。

标签： javascriptreactjs

解决方案

ReactDOM.render需要一个React 节点，因此您必须将两个节点包装到另一个节点中：

 render(
  <>
     <Login />
     <Register />
  </>, 
  document.getElementById("root")
);

推荐阅读