我在渲染组件时遇到问题。我有应用程序组件，它是主要组件，它的根/id位于index.js中，呈现良好。但问题是在SystemSidebar中，它有自己的root/id，但当我试图渲染它时，它会给我这个错误。目标容器不是DOM元素。
System Sidebar Component
class SystemSidebar extends Component {
render(){
return (
<div id='b' >
<Router>
<MainSystem/>
<Switch>
<Route exact path="Sound" component={Sound}/>
<Route exact path="Display" component={Display}/>
<Route exact path="/" component={Settings} />
</Switch>
</Router>
</div>
)
}
}
export default SystemSidebar
App Component
class App extends Component {
render(){
return (
<div id='a' className="App">
<div>
<BrowserRouter>
<Switch>
<Route exact path="/MainSystem" component={MainSystem}/>
<Route exact path="/BlueTooth" component={BlueTooth}/>
<Route exact path="/" component={Settings} />
</Switch>
</BrowserRouter>
</div>
</div>
);
}
}
export default App;
index.js
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('a')
);
ReactDOM.render(
<BrowserRouter>
<SystemSidebar />
</BrowserRouter>,
document.getElementById('b')
);
您应该将组件放在主组件App中，因为它是ReactJs的根
如果要使用renderDOM方法渲染两个组件，则必须首先在html文件中创建该元素。但这样做并不是一个好的做法，因为你们不能在这两者之间共享状态。
index.html
<head>
</head>
<body>
<div id="root"></div>
<div id="root2"></div>
</body>
index.js
const rootElement = document.getElementById("root");
const rootElement2 = document.getElementById("root2");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
ReactDOM.render(
<React.StrictMode>
<SystemSidebar />
</React.StrictMode>,
rootElement2
);