我是这里的新手，很抱歉可能是一个非常基本的问题。
我通过遵循一个教程来尝试用不同的方法来在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元素。”
ReactDOM.render通常仅用于呈现根组件，在这种情况下，我认为您不应该使用它。话虽如此，问题在于代码的执行顺序。您尝试在尚未渲染的节点中渲染Person2组件，因此出现该错误
除非您有一个非常奇怪的用例，否则在此示例中，您应该使用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'));
}