Reactjs 如何确保ReactDOM.createPortal应用程序内组件在我的测试用例中挂载时运行？
我尝试通过首先装载来运行测试应用程序组件，但它抛出错误：目标容器不是DOM元素，指向ReactDOM.createPortal函数中的第二个参数“header”…那么，我如何确保装载后名为element的头在那里？？？我试图通过制作一些document.createElement来添加头元素，但没有帮助…请帮助 用最新的版本来回应和开玩笑就可以了 App.test.jsReactjs 如何确保ReactDOM.createPortal应用程序内组件在我的测试用例中挂载时运行？,reactjs,jestjs,enzyme,react-dom,Reactjs,Jestjs,Enzyme,React Dom,我尝试通过首先装载来运行测试应用程序组件，但它抛出错误：目标容器不是DOM元素，指向ReactDOM.createPortal函数中的第二个参数“header”…那么，我如何确保装载后名为element的头在那里？？？我试图通过制作一些document.createElement来添加头元素，但没有帮助…请帮助 用最新的版本来回应和开玩笑就可以了 App.test.js import React from 'react'; import { mount } from 'enzyme'; imp
import React from 'react';
import { mount } from 'enzyme';
import App from './App';
it('render app', () => {
const rendered = mount(<App />);
});
从“React”导入React；
从“酶”导入{mount}；
从“./App”导入应用程序；
它（'渲染应用'，（）=>{
const rendered=mount（）；
});
import React from 'react';
import './App.css';
import ReactDOM from 'react-dom';
const headerProp = document.getElementById('header');
console.log("headerProp in App.js :: " , headerProp);
function App() {
return (
<div className="App">
{ReactDOM.createPortal(<div id='cntr'>HIIIIIIIII</div> , headerProp)}
</div>
);
}
export default App;
从“React”导入React；
导入“/App.css”；
从“react dom”导入react dom；
const headerProp=document.getElementById（'header'）；
log（“App.js:中的headerProp:”，headerProp）；
函数App（）{
返回(
{ReactDOM.createPortal（hiiii，headerProp）}
);
}
导出默认应用程序；
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
ReactDOM.render（，document.getElementById（'root'））；
serviceWorker.unregister（）；
....
.....
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div class="jp-react-cmp" id="header">
</div>
<div class="jp-react-cmp" id="banner">
</div>
<div class="jp-react-cmp" id="root">
</div>
...
....
....
.....
您需要启用JavaScript才能运行此应用程序。
...
....
Invariant Violation: Target container is not a DOM element.
8 | return (
9 | <div className="App">
> 10 | {ReactDOM.createPortal(<div id='cntr'>HIIIIIIIII</div> , headerProp)}
| ^
11 | </div>
12 | );
13 | }
不变冲突：目标容器不是DOM元素。
8 |返回(
9 |
>10 |{ReactDOM.createPortal（HIIIII，headerProp）}
| ^
11 |
12 | );
13 | }
import React from "react";
import ReactDOM from "react-dom";
function MyPortal() {
return ReactDOM.createPortal(
<div>Content</div>,
document.body
)
}
function App() {
return (
<div className="App">
<MyPortal />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
从“React”导入React；
从“react dom”导入react dom；
函数MyPortal（）{
返回ReactDOM.createPortal(
内容,，
文件正文
)
}
函数App（）{
返回(
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
希望这有帮助 您希望此门户的具体内容是什么？正如我所看到的，问题可能是提供的“header”参数不是有效的DOM节点。另外，我认为最好不要将其置于状态。请重新检查，我实际上有index.html中的标题引用，我的应用程序在其中呈现为根元素，如：：
ReactDOM.render（routes，document.getElementById（'root'））