Question

我正在使用React，并且正在使用progressbar.js来实现我的小部件进度。哪个工作正常。我改用loadBar.js代替。我将要加载页面，并且每个小部件（多个）都将按预期方式立即加载，然后在prop / state更新时，尽管在初始渲染中看到了该对象，但来自loadBar.js的对象“ ldBar”却变得不确定。

我知道初始渲染通过进度条组件中的对象起作用，因为我可以从其内部更改样式，并且随着初始进度可以很好地渲染。我已尝试从我的react应用程序中的较高/父级别导入JS模块，但收到相同的错误。

import React, { Component } from 'react';
// import throbber from './throbber5.gif';
// import ProgressBar from 'progressbar.js';
import './loading-bar.js';
import './loading-bar.css';

class ProgBar extends Component {

  constructor(props) {
    super(props);
    this.state = {
      percent: 0
    };
  }

  componentWillReceiveProps() {

  }

  componentDidMount() {
    console.log("progbar mounted.");

    let bar = new ldBar('#'+this.props.owner, {
      preset: 'stripe'
    });

    this.timerID = setInterval(
      () => this.tick(bar),
      10000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick(bar) {
    this.setState({percent: this.props.percent});
    if (this.state.percent > 0) {
      bar.set(this.state.percent);
    } else if (this.state.percent === undefined) {
      bar.set(1);
    }
  }

  render() {
    return (
      <div  
      data-value={this.state.percent} 
      key={this.props.owner} 
      id={this.props.owner}>
      </div>
    );
  }

}

export default ProgBar;

不确定状态/属性更新后，为什么正确渲染的对象变得不确定。错误：

./ src / ProgBar.js第23行：“ unBar”未定义'ldBar'

[编辑：19/7/22] 这是loading-bar.js中的错误行（709）：

  return window.addEventListener('load', function(){
    var i$, ref$, len$, node, results$ = [];
    for (i$ = 0, len$ = (ref$ = document.querySelectorAll('.ldBar')).length; i$ < len$; ++i$) {
      node = ref$[i$];
      if (!node.ldBar) {
        results$.push(node.ldBar = new ldBar(node));
      }
    }
    return results$;
  }, false);
})();
module.exports = ldBar;

[编辑：19/7/23] 这是错误的堆栈。还有一些Node错误：

Search for the keywords to learn more about each error.
__stack_frame_overlay_proxy_console__   @   index.js:2178
handleErrors    @   webpackHotDevClient.js:178
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage  @   webpackHotDevClient.js:211
./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @   eventtarget.js:51
(anonymous) @   main.js:278
./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage   @   main.js:276
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @   emitter.js:50
WebSocketTransport.ws.onmessage @   websocket.js:35

Answer 1

您能尝试一下作为一种变通方法吗，如果它不起作用，则会出现其他变化：

在类定义之外import './loading-bar.css';

let bar = new ldBar;

将componentDidMount功能更新为：

  componentDidMount(){
    bar = bar('#'+this.props.owner, {
      preset: 'stripe'
    });

    this.timerID = setInterval(
      () => this.tick(bar),
      10000
    );
  }

Answer 2

From the loadingbar.js website，您需要使用包装器才能使其在React上正常工作。

有可能在将来的版本中进行修复以与react一起使用。

React应用程序将在渲染器上加载loadingbar.js，然后对象在prop / state更新时变为未定义

2 个答案: