React 并使用 ReactDOM.createPortal() - 目标容器不是 DOM 元素错误
gra*_*Pro 11 javascript reactjs
我正在开发一个 React 应用程序，并尝试将 html 内容添加到组件外部ReactDOM.createPortal()的 div （称为 ToDoItem）。
{ReactDOM.createPortal(
<Route path={`/profile/project/${this.props.project._id}`} render={() =>
<ProjectView project={this.props.project}/>} />,
document.getElementById('tasks')
)}
公用文件夹中的任何 HTML 都不是预定义的 - 它都是动态创建的。
我认为这可能是错误的原因：React 尝试将 HTML 添加到带有 id 的 div 中tasks，但在此发生之前该 div 尚未加载到 DOM 中？
如果此方法不正确，是否有其他方法可以使用将 html 内容附加到组件外部的另一个 div 中？
其他一些信息：我尝试运行此方法的组件是无状态组件，而不是类组件。
这是错误：
Bik*_*kas 18
您可以使用 等待 DOM 准备就绪React.useEffect，然后调用ReactDOM.createPortal：
function Component() {
const [domReady, setDomReady] = React.useState(false)
React.useEffect(() => {
setDomReady(true)
}, [])
return domReady
? ReactDOM.createPortal(<div>Your Component</div>, document.getElementById('container-id'))
: null
}
我遇到这个问题是因为我忘记添加<div id="some-id"></div>到我的 index.html 文件中:-D
因此，提醒任何有类似问题或不知道如何使用 React 门户（例如创建模式）的人：
在modal.jsx中：
const modalRoot = document.getElementById('modal');
const Modal = () => {
const modalElement = document.createElement('div');
// appends the modal to portal once modal's children are mounted and
// removes it once we don't need it in the DOM anymore:
useEffect(() => {
modalRoot.appendChild(modalElement);
return () => {
modalRoot.removeChild(modalElement);
};
}, [modalElement]);
return createPortal(<div>modal content</div>, modalRoot);
};
在index.html中：
<!DOCTYPE html>
<html lang="en">
<head>
// head content
</head>
<body>
<div id="root"></div>
// dont't forget about this:
<div id="modal"></div>
</body>
</html>