ReactJs：生成随机数以显示在 Material UI 进度条中

Question

我正在尝试为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;

Answer 1

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

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;

这应该这样做。