如何在 React 中切换内联/门户

问题描述

我在 <div id="app"> 下有一个应用程序和一个门户根元素 <div id="portal"> (https://reactjs.org/docs/portals.html)。

ReactDOM.render(<App />,document.getElementById('app'));

我想在播放视频时在内联和门户之间切换。

我希望避免视频暂停，或者至少用户不会检测到暂停。

内联：

<body>
  <div id="app">
    <div>
      <button>Toggle inline/portal</button>
      <div class="inline">
        <video></video>
      </div>
    </div>
  </div>
  <div id="portal">
  </div>
</body>

门户（框架全屏的css）：

<body>
  <div id="app">
    <div>
      <button>Toggle inline/portal</button>
      <div class="inline">
      </div>
    </div>
  </div>
  <div id="portal">
    <video></video>
  </div>
</body>

这可能吗？我如何在 React 中实现它？

解决方法

你可以有条件地改变 CSS 而不是有两个容器：

import { useState } from "react";

const App = () => {
  const [cssStyle,setCssStyle] = useState("inline");

  const toggleVideoMode = () => {
    const mode = cssStyle === "inline" ? "portal" : "inline";
    setCssStyle(mode);
  };

  return (
    <div>
      <button onClick={toggleVideoMode}>Toggle inline/portal</button>
      <div className={cssStyle}>
        <video><video>
      </div>
    </div>
  );
};

export default App;

这可以通过在 React 中使用状态轻松完成，

import { useState } from "react";
import "./styles.css";

function VideoComponent(props) {
  console.log(props)
  return <p>Hi I am a video,inline mode: {JSON.stringify(props.mode)}</p>;
}

export default function App() {
  const [inlineMode,setInlineMode] = useState(true);

  return (
    <div className="App">
        <div id="app">
        <div>
          <button onClick={()=>setInlineMode(!inlineMode)}>Toggle inline/portal</button>
          <div className="inline">
            {inlineMode && <VideoComponent mode={inlineMode}/>}
          </div>
        </div>
      </div>
      <div id="portal">
      {!inlineMode && <VideoComponent mode={inlineMode}/>}
      </div>
    </div>
  );
}

CodeSandbox sample

react-portal reactjs reactjs reactjs reactjs

如何在 React 中切换内联/门户

问题描述

解决方法

相关问答