新手上路，请多包涵

我有 index.html

 <body>
    <div id="portal"></div>
    <div id="root"></div>
</body>

并希望在 portal div 而不是 root div 中单独使用以下组件，

 import React from 'react';

const portalDiv = document.getElementById('portal');

function Portal1(props) {
  return ReactDOM.createPortal(
    <div>
      {props.children}
    <div/>,
  portalDiv); //here
}

export default Portal1;

但我收到此错误， 类型为“HTMLElement | 的参数” null’ 不可分配给“元素”类型的参数。类型 ‘null’ 不能分配给 VScode 中的类型 ‘Element’.ts(2345) 。

我正在使用打字稿。

原文由 kishore 发布，翻译遵循 CC BY-SA 4.0 许可协议

reactjs typescript react-dom

阅读 1.4k

2 个回答

得票最新

社区维基

发布于
2022-09-13

✓ 已被采纳

其他人回答说您应该添加一个空检查，但是 Typescript 也有一个非空断言，当您通过在末尾添加 ! 运算符确定该值永远不会为空时，您可以使用该断言你的陈述：

 const portalDiv = document.getElementById('#your-element')!;

原文由 Titulum 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基

发布于
2022-09-13

所以我不知道是否有人仍然遇到这个问题，但是有一个更简单直接的解决方案。只需使用 “as” 关键字声明模态元素

const modalRoot = document.getElementById("modal-root") as HTMLElement; 这消除了错误。我建议查看这个很棒的 react-typescript 备忘单。

https://github.com/typescript-cheatsheets/react

原文由 Oluwaseyitan Baderinwa 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

vite打包的时候react-transition-group找不到react-dom？
{代码...} 有正确安装对应版本，运行没有问题，打包出问题 {代码...} 我尝试过删除node_module重新下载打包，使用命令清除pnpm缓存再重新删除下载打包查询了文档，发现这三个版本是兼容的，没有问题
646 阅读

'HTMLElement \| 类型的参数null' 不可分配给“元素”类型的参数。类型“null”不可分配给类型“元素”.ts(2345)

你尚未登录，登录后可以

vite打包的时候react-transition-group找不到react-dom？

Stack Overflow 翻译