Question

我正在建立一个使用实时聊天的React网站，并使用react-livechat软件包。我已经将其与react-lazyload插件配对，以防止它对页面加载时间产生不利影响。

我现在正在尝试一种方法，以便在与页面互动后立即加载livechat组件。当前，仅当页面滚动到组件的设置距离（默认情况下是页面的页脚）以内时才渲染。这确实可以防止页面加载受到影响，但是需要用户在加载组件之前滚动一定距离。理想情况下，它将加载与页面的任何交互形式。

import React, { Component } from 'react';

import LiveChat from 'react-livechat';
import LazyLoad from 'react-lazyload';

class App extends Component {


  render() {
    return (
      <div className="App">
        ...
        <LazyLoad once>
          <LiveChat license={'xxxxxx'} />
        </LazyLoad>
        ...
      </div>
    );
  };
}

export default App;

Answer 1

我设法通过一种变通方法来解决此问题，并在一段时间后加载了组件。我发现10秒可以很好地确保即使在移动设备上也可以完全渲染所有内容。


// App.js
import React, { Component } from 'react';
import LazyLiveChat from './components/utils/lazyLiveChat';

class App extends Component {

  constructor() {
    super();
    this.state = { loadLiveChat: false };
  }

  componentDidMount() {
    setTimeout(() => this.setState({loadLiveChat: true}), 10000);
  }

  render() {
    return (
      <div className="App">
        ...
        <LazyLiveChat loadChat={this.state.loadLiveChat} />
        ...
      </div>
    );
  };
}

export default App;

// lazyLiveChat.js
import React, { Component } from 'react';
import LiveChat from 'react-livechat';

class LazyLiveChat extends Component {

  render() {
    if (this.props.loadChat) {
      return (
        <LiveChat license={xxxxxx} />
      );
    }
    return null;
  }
}

export default LazyLiveChat;

页面与之互动后立即进行反应

1 个答案: