Как лениво загрузить компонент React перед компонентом с фиксированным положением, используя библиотеку реагировать-ленивить? - PullRequest
Новая
       59

Как лениво загрузить компонент React перед компонентом с фиксированным положением, используя библиотеку реагировать-ленивить?

0 голосов
/ 27 октября 2019

Я использую пакет react-lazyload npm для ленивой загрузки MyComponent. Однако компонент, расположенный над ним, имеет фиксированное положение. Я предполагаю, что это не должно быть проблемой, потому что библиотека явно упоминает, что следует избегать только статической позиции (ищите "static" в ссылке).

При этом MyComponentне загружается с фиксированной позиции. Я попытался использовать overflow prop, но это не помогло. Это ограничение библиотеки или я ее неправильно использую?

Это мой код (App является основным компонентом React): 

import React from 'react';
import Debounce from './Debounce';

const App = () => {
  return (
    <div className="list">
      <div style={{ width: 300, height: 800, backgroundColor: 'blue', position: 'fixed' }}></div>
      <Debounce />
    </div>
  );
};

export default App;

import React, { Component } from 'react';
import LazyLoad from 'react-lazyload';
import MyComponent from './MyComponent';

export default class Debounce extends Component {
    render() {
        return (
            <div>
                <LazyLoad once debounce={2000} height={200} offset={-100} overflow>
                <MyComponent />
            </LazyLoad>
            </div>
          );
    }
}


import React from 'react';

export default class MyComponent extends React.Component {
    componentDidMount() {
        console.log('from didMount')
    }

    render() {
        console.log('from render')
        return (
            <div style={{ width: 300, height: 500, backgroundColor: 'green' }}>

            </div>
          )   
    }
  }
...