reactjs 尝试更新Jsx元素的样式时出现问题

iqih9akk 于 2023-01-04 发布在 React

关注(0)|答案(1)|浏览(133)

import React, { Component } from 'react'

class ProgressBar extends Component {

  render() { 

      let progressContainer = document.querySelector('.progress-container');
      let valueContainer = document.querySelector('.progress-value');
      const speed = 20;
      let progressValue = 0;
      let progressEndValue = 70;

      function updateElements() {
        valueContainer = document.querySelector('.progress-value');
        progressContainer = document.querySelector('.progress-container');
      }

      const createProgress = setInterval(() => {
        progressValue++;
        updateElements();
        valueContainer.innerText = `${progressValue} %`
        progressContainer.style.background = `conic-gradient(
            rgb(239 68 68) ${progressValue * 3.6}deg,
            black 1deg,
            rgb(241 245 249) 1deg,
        )`
        
        if (progressValue == progressEndValue) {
            clearInterval(createProgress);
        }
    }, speed) 

    return (
      <div className='progress progress-container w-full h-full rounded-full flex justify-center items-center'>
        <div className="progress w-3/4 h-3/4 rounded-full bg-slate-100 flex justify-center items-center">
            <h1 className='progress-value' >0 %</h1>
        </div>
      </div>
    ) 
  }
}

export default ProgressBar;

这是我的代码，我基本上是在尝试创建一个动态的圆形进度条。我使用updateElements函数来防止未捕获的null错误，进度值在DOM中成功地在0和70%之间变化。但是圆锥渐变背景不能从函数应用到DOM中。但是如果我用相同的代码在CSS文件中静态地设置它。它可以工作。

有人帮帮我吧，我从昨天开始就在挣扎

reactjs

来源：https://stackoverflow.com/questions/74995155/problem-while-trying-to-update-style-of-a-jsx-element

1条答案

按热度按时间

hc2pp10m1#

import React, { Component } from 'react'

class ProgressBar extends Component {
    state={
        progressValue:0,
        speed:20,
        progressEndValue:70
    }

  render() { 

      let progressContainer = document.querySelector('.progress-container');
      let valueContainer = document.querySelector('.progress-value');

      function helperFunctions() {
        valueContainer = document.querySelector('.progress-value');
        progressContainer = document.querySelector('.progress-container');
        
      }

      const createProgress = setInterval(() => {
        if (this.state.progressValue <= this.state.progressEndValue) {
            this.setState({progressValue:this.state.progressValue+1});
            helperFunctions();
            valueContainer.innerText = `${this.state.progressValue} %`
            progressContainer.style.background = `conic-gradient(rgb(239 68 68) ${this.state.progressValue * 3.6}deg,black 1deg,rgb(241 245 249) 1deg)`        
     
        } else {
            clearInterval(createProgress);
        }
        
    }, this.state.speed) 

    return (
      <div className='progress progress-container w-full h-full rounded-full flex justify-center items-center'>
        <div className="progress w-3/4 h-3/4 rounded-full bg-slate-100 flex justify-center items-center">
            <h1 className='progress-value' >0 %</h1>
        </div>
      </div>
    ) 
  }
}

export default ProgressBar;

现在它工作得很好：）
建议：
如果您使用的是函数组件，则会更容易完成，您可以使用useRef代替document.querySelector，因为它被推荐为Reactdocument

- 主要问题是最后一个，在圆锥梯度中**

赞(0）回复(0）举报 2023-01-04

我来回答

reactjs 尝试更新Jsx元素的样式时出现问题

1条答案

相关问题

热门标签

最新问答