Блог

У меня проблема с моим приложением React. Когда я пытаюсь получить список селекторов, я не могу получить те, которые находятся в отложенном компоненте.

В моем компоненте моя переменная «длина» учитывает только селекторы класса. Она считает 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>
            <p className="text">Hello, this text contains a class name.</p>
            <p className="text">Hello, this text contains a class name.</p>
            <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 отображается на другом маршруте / компоненте-два и, следовательно, еще не загружен, длина массива, возвращаемого из querySelectorAll, действительно должна быть 6 .

Если вы хотите, чтобы это было выбрано во время вызова componentDidMount(), вы могли бы попробовать не откладывать загрузку компонента.