React -目标容器不是DOM元素

Question

我是React新手。我想完成这样的事情:

单击按钮时，执行一些抓取操作，然后自动呈现模态。渲染模态时不需要再次按下按钮。

我使用来自官方React-Bootstrap网站的模态示例(进行了一些修改)。我得到以下错误:

Uncaught (in promise) Error: Target container is not a DOM element.
at render (react-dom.development.js:26091:1)
at startGame (StartGame.jsx:30:1)

这是我的代码:

import React from 'react';
import PropTypes from 'prop-types';
import Modal from 'react-bootstrap/Modal'
import { render } from 'react-dom';
function StartGame (props) {
const token = localStorage.getItem('token');
const [sessionId, setSessionId] = React.useState(null);
const quizId = props.data;
const startGame = async () => {
const init = {
method: 'POST',
headers: {
'Content-type': 'application/json',
Authorization: `Bearer ${token}`
}
}
await fetch(`http://localhost:5005/admin/quiz/${quizId}/start`, init);
const init2 = {
method: 'GET',
headers: {
'Content-type': 'application/json',
Authorization: `Bearer ${token}`
}
}
const response = await fetch(`http://localhost:5005/admin/quiz/${quizId}`, init2);
const output = await response.json();
setSessionId(output.active);
console.log(sessionId);
render(<Example />);
}
return (
<>
<button onClick={startGame}>Start</button>
</>
);
}
function Example () {
const [show, setShow] = React.useState(true);
const handleClose = () => setShow(false);
return (
<>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Hello there</Modal.Body>
<Modal.Footer>
<button onClick={handleClose}>
Close
</button>
<button onClick={handleClose}>
Save Changes
</button>
</Modal.Footer>
</Modal>
</>
);
}
StartGame.propTypes = {
data: PropTypes.number
};
export default StartGame;

我不确定为什么会发生这种情况，以及我如何解决它。我浏览了大量的在线教程/示例，但找不到任何符合我需要的。

请帮助。

Answer 1

我假设您正在使用React <= 17:ReactDOM.render有两个参数:第一个是要呈现的JSX元素，第二个是要呈现的HTML DOM元素。

通常，人们是这样做的:

ReactDOM.render(
<App />,
document.getElementById('root')
);

如果你使用的是React 18:

const container = document.getElementById('root');
const root = ReactDOMClient.createRoot(container);
root.render(<App />);

---

psi。如果您想将JSX元素呈现为html字符串，您可以使用renderToStaticMarkup，如下所示:

const myHtmlString = ReactDOMServer.renderToStaticMarkup(<App />);