javascript - react 并使用 ReactDOM.createPortal() - 目标容器不是 DOM 元素错误

Question

我正在开发一个 React 应用程序并尝试使用 ReactDOM.createPortal()将 html 内容添加到组件外部的 div(称为 ToDoItem)。

{ReactDOM.createPortal(
    <Route path={`/profile/project/${this.props.project._id}`} render={() => 
    <ProjectView project={this.props.project}/>}  />,
    document.getElementById('tasks')
)}

公共(public)文件夹中的任何 HTML 都不是预定义的 - 它都是动态创建的。

我认为这可能是错误的原因:React 尝试将 HTML 添加到 id 为 tasks 的 div哪个，但在发生这种情况之前 div 没有加载到 DOM 中？

如果此方法不正确，还有其他方法可以使用将 html 内容附加到组件外的另一个 div 吗？

其他一些信息:我尝试运行此方法的组件是无状态组件，而不是类组件。

这是错误:

Answer 1

您可以使用 React.useEffect 等到 DOM 准备就绪。 ，然后您调用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
}