1

想象一下，渲染多个iframes（使用react-frame-component）并允许用户重新排序它们。

令人惊讶的是，当iframe重新排序 s 时，<body>其中之一的 s 变为空。

我在这里提出了一个问题，但想知道也许这里的某个人也能提供帮助，因为最近在 repo 上没有太多活动。

function App() {
  const [frames, setFrames] = useState(["first", "second"]);

  return (
    <div className="app">
      <div className="framesContainer">
        {frames.map(frame => (
          <div className="frame" key={frame}>
            <Frame style={{ width: 200, height: 200 }}>
              <h1>Hello World</h1>
            </Frame>
            <div>{frame}</div>
          </div>
        ))}
      </div>
      <div className="actions">
        <button
          onClick={() => {
            setFrames(frames => [frames[1], frames[0]]);
          }}
        >
          Swap frames
        </button>
      </div>
    </div>
  );
}

单击按钮后， firstiframe的<body>变为空。

代码沙盒

4

1 回答 1

0

使用react-dnd/react-beautiful-dnd进行多个 iframe 重新排序和排序时，我面临同样的问题。

我发现的唯一方法是在订单状态更新时强制 iframe 组件重新呈现。但是，当所有 iframe 一次更新时，应用程序可能会非常慢。

于 2021-03-25T04:25:29.457 回答