目标容器不是 DOM 元素 - 导入函数时出错答案

【问题标题】：Target container is not a DOM element - error in importing a function目标容器不是 DOM 元素 - 导入函数时出错
【发布时间】：2020-01-01 01:02:01
【问题描述】：

我是这里的新手，所以很抱歉可能是一个非常基本的问题。

我正在尝试通过遵循教程来尝试在 React 中导入组件的不同方法，但我似乎无法使其工作。一定有一个我非常想念的简单调整。

我正在尝试创建将组件 (Person2) 导出到另一个 JS (App)

Person2.js

import React from 'react'
import ReactDOM from 'react-dom'

function Person2(){
 return (
   <div>
   <h1>Millie</h1>
   <p>PERSON 2</p>
   </div>
 );
}


/*
ReactDOM.render(
   <div>
       <h1>Hello World!</h1>
   </div>,
   document.getElementById('#p2')
);
*/


//ReactDOM.render(<Person2 />, document.getElementById('App'));
ReactDOM.render(<Person2 />, document.querySelector('#p2'));

App.js

import React from 'react';
import './css/App.css';
import './css/w3.css'
import Person from './Person'; // Import a component from another file using class with default export
import './Person2'; // Import a a component from another file using ReactDom.render


function App() {
  return (
    <div className="App">

      <header className="App-header">
        <p>this is the header</p>
      </header>
      <body>
        <div class="w3-row">
          <Person name="Max" age="28"/>
          <Person name="Ann" age="18"/>
          <div id = "p2"></div>
        </div>
      </body>
    </div>
  );
}

export default App;

知道我哪里出错了吗？

我收到一个错误“错误：目标容器不是 DOM 元素。”

【问题讨论】：

入口点是什么文件？分享代码
这里是完整（无效）代码github.com/rosanna-ang/udemymax

标签： reactjs react-dom

【解决方案1】：

ReactDOM.render 通常只用于渲染你的根组件，我认为你不应该在这种情况下使用它。话虽如此，问题在于代码的执行顺序。您尝试在尚未渲染的节点中渲染您的 Person2 组件，因此您会收到该错误

【讨论】：

【解决方案2】：

除非你有一个非常奇怪的用例，否则你应该在这个例子中使用export 而不是ReactDOM.render。

在Person2，改成这样：

//ReactDOM.render(<Person2 />, document.querySelector('#p2'));
export default Person2;

然后使用它，在App改成这样：

import Person2 from './Person2'; // for default export

...

<Person name="Ann" age="18"/>
//<div id = "p2"></div> *** remove this ***
<Person2 /> // Use like this

如果您的应用出于某种原因需要在此处使用ReactDOM.render，我会添加一个安全检查以确保该元素首先存在。

if (!!document.getElementById('p2')) {
  ReactDOM.render(<Person2/>, document.getElementById('p2'));
}

【讨论】：