Представьте, рендеринг нескольких iframe s (с использованием react-frame-component) и разрешение пользователям изменять их порядок.
Удивительно, но когда iframe s переупорядочены, <body> один из них становится пустым.
Я поднял проблему здесь , но интересно, может быть, кто-то здесь сможет помочь, так как в последнее время с репо не наблюдается большой активности.
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>
);
}
После нажатия кнопки первая iframe <body> становится пустой.
CodeSandbox