React-無法在“節點”上執行“removeChild”-有解無憂

進入網站時，您將在帶有路徑的 Home 組件中 /

但是，如果您將頁面切換到 About/Dashboard，則會出現以下錯誤

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

如何解決？

例子.js

import React, { useEffect } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import ScrollMagic from "scrollmagic";

export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  useEffect(() => {
    const scrollController = new ScrollMagic.Controller({
      globalSceneOptions: { triggerHook: "onCenter" }
    });
    const scrollScene = new ScrollMagic.Scene({
      triggerElement: "#pin",
      duration: 2000,
      offset: -50
    })
      .setPin("#pin")
      .on("progress", function (e) {
        console.log(e.progress);
      });
    scrollScene.addTo(scrollController);
  }, []);
  return (
    <div id="pin">
      <h2>Home</h2>
      <div style={{ height: "1700px" }}>Another Stuff</div>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <div style={{ height: "1700px" }}>Another Stuff in Dashboard</div>
    </div>
  );
}

Codesandbox
https://codesandbox.io/s/react-router-basic-forked-q9iwm?file=/example.js

uj5u.com熱心網友回復：

我不知道你想用 ScrollMagic 實作什么，但下面的塊肯定有效。

<React.Fragment id="pin">
  <h2>Home</h2>
  <div style={{ height: "1700px" }}>Another Stuff</div>
</React.Fragment>

沙盒鏈接

補充一點，當我除錯時，看起來當你使用 setPin 函式時，它會導致一些問題。萬事如意，~v

uj5u.com熱心網友回復：

問題出在 About/Dashboard 功能中，您可以將 div 標簽替換為 <React.Fragment> 并嘗試。片段讓您可以對子串列進行分組，而無需向 DOM 添加額外的節點。

function About() {
   return (
     <React.Fragment>
      <h2>About</h2>
     </React.Fragment>
  );
}

uj5u.com熱心網友回復：

似乎問題出在組件中的useEffect代碼上。home我對此發表了評論，一切似乎都很好。參見代碼框https://codesandbox.io/s/react-router-basic-forked-7oysy?file=/example.js

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/410575.html

標籤：

上一篇：React和reactnative：意外的令牌。預期有建構式、方法、訪問器或屬性。ts(1068)

下一篇：如何在物件陣列中獲取陣列的內容