ReactJs：生成要显示在Material UI进度栏中的随机数

如何解决ReactJs：生成要显示在Material UI进度栏中的随机数

我正在尝试为test functionality生成随机数以显示在我的Material UI Progress bar中。这段JS代码正在JS fiddle中工作。 但是我想用我的reactJs显示这个随机数。

任何帮助/建议如何实现这一目标。

//测试代码

class TestPage extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        displayProgress: ""
      }
    }
  
    displayProgress() {
      this.setState(document.getElementById('out').innerHTML = Math.random() * 101 | 0);
    }
   
    render() {
    const {  displayProgress } = this.props;
    
    const createProgress = setInterval(displayProgress,1000);
      return (
        
        <div className="test">
            <div id="out"></div>
            <LinearProgress variant="determinate" value={createProgress} />
        </div>
      ); 
  
    }
  };
export default TestPage;

解决方法

在反应中直接访问dom元素不是一个好主意。这更有意义：

class TestPage extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        progress : 0
      }
    }
    componentDidMount(){
        this.interval = setInterval(()=>{
            this.displayProgress();
        },1000)
    }
    componentWillUnmount(){
        clearInterval(this.interval);
    }
    displayProgress = () => {
        const prog = Math.random() * 101
        this.setState({
            progress : prog
        })
    }
   
    render() {
      return (
        
        <div className="test">
            <LinearProgress variant="determinate" value={this.state.progress} />
        </div>
      ); 
  
    }
  };
export default TestPage;

这应该做到。