entityMap|blocks|key|21ee7|text|因为getElementById可能返回null。因此，您只需在使用like之前进行检查即可：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1qnad|function+Portal1({+children+})+{
++return+portalDiv+?+ReactDOM.createPortal(<>{children},+portalDiv)+:+null;
}|code-block|syntax|javascript^0|2|E|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@$A|M|B|N|C|D]]|E|@]|F|$]]|$2|G|4|H|6|I|8|O|9|@]|E|@]|F|$J|K]]]]

Since <code>getElementById</code> possibly returns null. So you just simply check before using like:
<pre><code>function Portal1({ children }) {
 return portalDiv ? ReactDOM.createPortal(&lt;&gt;{children}&lt;/&gt;, portalDiv) : null;
}
</code></pre>

entityMap|blocks|key|ajilg|text|其他人回答说你应该添加一个null-check，但是Typescript也有一个非null断言，你可以在当然可以属性，以确保该值永远不会为空!运算符添加到语句末尾：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3j70r|const+portalDiv+=+document.getElementById('#your-element')!;|code-block|syntax|javascript^0|1Y|1|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@$A|M|B|N|C|D]]|E|@]|F|$]]|$2|G|4|H|6|I|8|O|9|@]|E|@]|F|$J|K]]]]

Other people have answered that you should add a null-check, but Typescript also has a non-null assertion that you can use when you are sure that the value is never null by adding the <code>!</code> operator to the end of your statement:
<pre><code>const portalDiv = document.getElementById('#your-element')!;
</code></pre>

entityMap|blocks|key|ahg3v|text|所以我不知道是否有人仍然有这个问题，但有一个更简单和直接的解决方案。只需使用以下命令声明模式元素"as“关键词|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5sn4e|const+modalRoot+=+document.getElementById("modal-root")+as+HTMLElement;|offset|length|style|CODE|a2plo|这将删除错误。我建议你看看这篇很棒的react-typescript小抄。|6d8a0|https://github.com/typescript-cheatsheets/react^0|0|0|1Z|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|M|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|N|9|@$E|O|F|P|G|H]]|A|@]|B|$]]|$2|I|4|J|6|7|8|Q|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|R|9|@]|A|@]|B|$]]]]

So I dont know if anyone is still having this problem but there's an easier and straightforward solution to this.
simply declare the modal element with &quot;as&quot; keyword 
<code>const modalRoot = document.getElementById(&quot;modal-root&quot;) as HTMLElement;</code>
This removes the error.
I suggest looking through this great react-typescript cheatsheet. 
https://github.com/typescript-cheatsheets/react

entityMap|blocks|key|cfsf6|text|getElementById可以返回null，但是createPortal不接受null。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|atp24|如果你知道门户div将会存在，使代码显式地说明这一点：|1ito1|const+portalDiv+=+document.getElementById('portal');
if+(!portalDiv)+{
++++throw+new+Error("The+element+#portal+wasn't+found");
}|code-block|syntax|javascript|e9tjr|这将允许TypeScript缩小常量的类型，删除%7C+null类型的一部分。如果有人更改了一些东西，使div在此代码不再运行时不存在，它还会给您一个很好的主动警告。^0|0|E|I|4|P|C|14|4|0|0|0|O|6^^$0|$]|1|@$2|3|4|5|6|7|8|P|9|@$A|Q|B|R|C|D]|$A|S|B|T|C|D]|$A|U|B|V|C|D]|$A|W|B|X|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|Y|9|@]|E|@]|F|$]]|$2|I|4|J|6|K|8|Z|9|@]|E|@]|F|$L|M]]|$2|N|4|O|6|7|8|10|9|@$A|11|B|12|C|D]]|E|@]|F|$]]]]

<code>getElementById</code> can return <code>null</code>, but <code>createPortal</code> doesn't accept <code>null</code>.
If you know the portal div will exist, make the code explicit about that:
<pre><code>const portalDiv = document.getElementById('portal');
if (!portalDiv) {
 throw new Error(&quot;The element #portal wasn't found&quot;);
}
</code></pre>
That will allow TypeScript to narrow the type of the constant, removing the <code>| null</code> part of the type. It also gives you a nice proactive warning if someone changes things such that the div isn't there when this code runs anymore.

entityMap|blocks|key|7om6t|text|我认为最好的解决方案也不是空或者HTMLDIVElemen而是在用例尝试让typescript知DivElement目前可能是空的，但您将通过使用"!“来承担责任。符号。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|f4tqo|代码示例如下：|8hhbk|import+React,+{useEffect}+from+'react';
import+ReactDOM+from+'react-dom';
import+'./modal-portlet.style.scss';

const+modalRoot+=+document.getElementById('modalRoot');

type+Props+=+{
++children:+JSX.Element;
};
const+ModalPortlet:+React.FC+=+({children}):+JSX.Element+=>+{
++const+divContainer+=+window.document.createElement('div');
++divContainer.setAttribute('class',+'modal-container');

++useEffect(()+=>+{
++++/**********
+++++*+immediately+the+component+mount+append+@divContainer+as+the+childNode+of+@modalRoot+in+the+DOM
+++++**********/
++++modalRoot!.appendChild(divContainer);

++++return+()+=>+{
++++++modalRoot!.removeChild(divContainer);
++++};
++});

++/************
+++*+return+the+createPortal+api+that+takes+the+children(JSX)+and+inject+it+into+@divContainer+which+is+already+a+childNode+of+@modalRoot
+++************/
++return+<>{ReactDOM.createPortal(children,+divContainer)};
};

export+default+ModalPortlet;|code-block|syntax|javascript^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|L|9|@]|A|@]|B|$H|I]]]]

I think the best solution to this is not to make it either null or HTMLDIVElement but rather in the use-case try to let typescript know that the DivElement might be empty at the moment, but you will take responsibility of it by just using &quot;!&quot; symbol.
Code sample below:
<pre><code>import React, {useEffect} from 'react';
import ReactDOM from 'react-dom';
import './modal-portlet.style.scss';

const modalRoot = document.getElementById('modalRoot');

type Props = {
 children: JSX.Element;
};
const ModalPortlet: React.FC&lt;Props&gt; = ({children}): JSX.Element =&gt; {
 const divContainer = window.document.createElement('div');
 divContainer.setAttribute('class', 'modal-container');

 useEffect(() =&gt; {
 /**********
 * immediately the component mount append @divContainer as the childNode of @modalRoot in the DOM
 **********/
 modalRoot!.appendChild(divContainer);

 return () =&gt; {
 modalRoot!.removeChild(divContainer);
 };
 });

 /************
 * return the createPortal api that takes the children(JSX) and inject it into @divContainer which is already a childNode of @modalRoot
 ************/
 return &lt;&gt;{ReactDOM.createPortal(children, divContainer)}&lt;/&gt;;
};

export default ModalPortlet;
</code></pre>

I have index.html
<pre class="lang-html prettyprint-override"><code>&lt;body&gt;
 &lt;div id=&quot;portal&quot;&gt;&lt;/div&gt;
 &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre>
and want to use the component below in separate <code>portal div</code> than <code>root div</code>,
<pre class="lang-js prettyprint-override"><code>import React from 'react';

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

function Portal1(props) {
 return ReactDOM.createPortal(
 &lt;div&gt;
 {props.children}
 &lt;div/&gt;, 
 portalDiv); //here
}

export default Portal1;
</code></pre>
But I am getting this error, Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element'.
Type 'null' is not assignable to type 'Element'.ts(2345) in VScode.
I am using Typescript. Please help.

Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element'. Type 'null' is not assignable to type 'Element'.ts(2345)

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

 我有index.html 并希望单独使用下面的组件portal div比root div import React from 'react';const portalDiv = document.getElementById('portal');function Portal1(props) {  return ReactDOM.createPortal(          {props.chi

问'HTMLElement | null‘类型的参数不能赋值给'Element’类型的参数。类型'null‘不可赋值给类型’Element‘。to (2345)
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问'HTMLElement | null‘类型的参数不能赋值给'Element’类型的参数。类型'null‘不可赋值给类型’Element‘。to (2345)EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问'HTMLElement | null‘类型的参数不能赋值给'Element’类型的参数。类型'null‘不可赋值给类型’Element‘。to (2345)
EN