0

我尝试通过先挂载来运行测试 App 组件，但它抛出错误：目标容器不是 DOM 元素，指向 ReactDOM.createPortal 函数中的第二个参数“标题”......所以，我怎样才能确保标题命名的元素是安装后在那里？？？我尝试 attachTo 通过制作一些 document.createElement 来制作标题元素，但没有帮助...请帮助...

对最新版本做出反应和开玩笑会很好，因为环境

应用程序.test.js


import React from 'react';
import { mount } from 'enzyme';
import App from './App';

it('render app', () => {
    const rendered = mount(<App />);
});

应用程序.js


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;

index.js

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();

索引.html


....
.....
<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>

...
....

错误，在 npm run test:: 之后


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 | }
4

1 回答 1

0

您的代码中的问题是您提供了一个无效的标头作为 createPortal的参数。

使用ReactDOM.createPortal的一个简单示例是：

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);

希望这可以帮助！

于 2019-08-30T05:10:23.257 回答