ReactJS-带有惰性组件的document.querySelectorAll

如何解决ReactJS-带有惰性组件的document.querySelectorAll

我的React应用程序有问题。当我尝试检索选择器列表时，无法检索惰性组件中的选择器。

在我的组件中，我的变量“ length”仅计算该类的选择器。她是6而不是7。

您能帮我解决我的问题吗？

App.js

    import React,{ Suspense,lazy } from 'react';
    import { Switch,Route } from 'react-router-dom';
    import AppFront from './AppFront';
    import Mouse from './component/Mouse';
    import './App.css';
    
    const LazyComponentTwo = lazy(() => import('./component/ComponentTwo'));
    
    
    function App() {
      return (
        <div className="App">
          <Mouse />
          <Switch>
            <Suspense fallback={<div>Loading...</div>}>
              <Route exact path="/" component={AppFront} />
              <Route path="/component-two" component={LazyComponentTwo} />
            </Suspense>
          </Switch>
        </div>
      );
    }
    
    export default App;

AppFront.jsx

     import React,{ Component } from 'react';
     import ComponentOne from './component/ComponentOne';
    
    class AppFront extends Component {
      render() {
        return (
          <div className="AppFront">
            <ComponentOne />
          </div>
        );
      }
    }
    
    export default AppFront;

ComponentOne.jsx

    import React,{ Component } from 'react';
    
    class ComponentOne extends Component {
      render() {
        return (
          <div className="ComponentOne">
            <p className="text">Hello,this text contains a class name.</p>
            <p className="text">Hello,this text contains a class name.</p>
          </div>
        );
      }
    }

    export default ComponentOne;

ComponentTwo.jsx

    import React,{ Component } from 'react';
    
    class ComponentTwo extends Component {
      render() {
        return (
          <div className="ComponentTwo">
            <p className="text">Hello,this text contains a class name.</p>
          </div>
        );
      }
    }
    
    export default ComponentTwo;

Mouse.jsx

    import React,{ Component } from 'react';
    
    class Mouse extends Component {
      componentDidMount() {
        const length = document.querySelectorAll(".text");
        console.log(length); // Output : 6,and not 7
      }
      render() {
        return (
          <div className="Mouse">
    
          </div>
        );
      }
    }
    
    export default Mouse;

解决方法

在这种情况下，我认为这只是预期的行为。

由于ComponentTwo显示在不同的路径/ component-two上，因此尚未加载，因此从querySelectorAll返回的数组的长度确实应该为6。

如果希望在调用componentDidMount（）时选择该选项，则可以尝试不延迟加载组件。