Question

当我将某些东西应用于div用作门户网站ReactDOM.createPortal时，#root中的元素仍然可以聚焦。
在我的#root元素中，有一些可滚动部分，但在门户网站被触发时仍然可以滚动。

我已经尝试使用z-index并将设置为门户的元素设置到代码中的其他位置。

我尝试使用代码段，但是我不知道如何在React中使用它。

index.html：

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

<div id="modal-portal"></div> <!-- This is the Portal -->

<script src="./index.tsx"></script>

index.tsx：

import React from 'react';
import { Modal } from './modal';

class App extends React.Component<{}> {
  render() {
    return (
      <div>
        {/* a page with information which is scrollable... */}

        <Modal />
      </div>
    );
  }
}
ReactDOM.render(<App/>, document.getElementById('root'));

modal / index.tsx：

export const Modal = (props:IModal) => {
  const Element = (
    <div>
      {/* Styling to look it like a modal */}
    </div>
  );

  return ReactDOM.createPortal(Element, document.querySelector("#modal-portal"));
}

我想要什么：

加载Modal后，该页面将不再滚动。但是在Mobile上它仍然可以滚动

使用ReactDOM.createPortal（）时，避免将注意力集中在移动设备上

0 个答案: