使用数据时的材质UI线性进度动画 [英] Material UI linear progress animation when using data

问题描述

材料ui上的reactJS文档为确定进度条提供了此示例代码.

The docs at material ui for reactJS proposes this sample code for determinate progress bars.

export default class LinearProgressExampleDeterminate extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            completed: 0,
        };
    }

    componentDidMount() {
        this.timer = setTimeout(() => this.progress(5), 1000);
    }

    componentWillUnmount() {
        clearTimeout(this.timer);
    }

    progress(completed) {
        if (completed > 100) {
            this.setState({completed: 100});
        } else {
            this.setState({completed});
            const diff = Math.random() * 10;
            this.timer = setTimeout(() => this.progress(completed + diff), 1000);
        }
     }

     render() {
        return (
            <LinearProgress mode="determinate" value={this.state.completed} />
        );
     }
}

这将创建一个加载动画，直到栏已满.我试图将其修改为使用json文件中的数据，以使其停止在我在每个json项目中为其指定的值.我说的对.那是容易的部分.但是动画失败，因为动画是使用构造函数状态中的completed值编写的.而且它也位于我的data.map之外，因此我似乎可以找到一种方法来使其读取json文件中的值，以便它可以将其用于超时功能. :(

This creates a loading animation until bar is full. I am trying to modify it to use data from a json file so that it stops at the value that I specified for it in each json item. I am getting that part right. That was the easy part. But the animation fails because the animation is scripted using the value of completed in the constructor's state. And it is also located outside of my data.map so I can seem to find the way to make it read the value in the json file so it can se it for it's timeout function. :(

这就是我(减少的)

JSON

exports.playerItems = [
    {
        id: 283,
        completed: "100",
    }
    {
        id: 284,
        completed: "70",
    }
    {
        id: 285,
        completed: "20",
    }

    ...

    {
        id: 295,
        completed: "50",
    }
]

数据注入

import PLAYERS from 'data/players.js';
const playersData = PLAYERS['playerItems'];

我的表已映射

<Table>
   {playersData.map((row, index) => (
       <TableRow id={row.name} key={index}>
           <TableRowColumn>

                <LinearProgress
                    mode="determinate"
                    value={row.completed} />

            </TableRowColumn>
       </TableRow>
   ))}
</Table>

如何修改progress()函数，以使赋予LinearProgress的值动画化?

How can I modify the progress() function so that it animates the value given to the LinearProgress?

预先感谢

推荐答案

您可以将状态更改应用于播放器数据数组，并以增量为单位不断更新该数组，直到所有播放器都呈现为止.

You can apply a state change to an array of player data and continually update the array in increments until all of the players have rendered.

首先，从零开始:

  constructor(props) {
    super(props);
    this.state = {
      playersData: data.map(item => ({ ...item, completed: 0}))
    };
  };

然后在挂载时启动进度

  componentDidMount() {
    this.timer = setTimeout(() => this.progress(5), 100);
  }

更新，直到每个玩家达到100％:

Update until each player has reached 100%:

  progress(completion) {
    let done = 0;
    this.setState({
      playersData: data.map((item, i) => {
        const { completed: current } = this.state.playersData[i];
        const { completed: max } = item;
        if (current + completion >= max) {
          done += 1;
        }
        return {
          ...item,
          completed: Math.min(current + completion, max),
        };
      }),
    });
    if (done < data.length) {
      this.timer = setTimeout(() => this.progress(5), 100);
    }
  }

根据需要调整延迟和增量.局限性在于您需要将要呈现的所有播放器数据，并且它们需要以一个数组的形式处于状态，该数组可以在单个setState

Adjust the delay and increment as you see fit. The limitation is that you need all of the player data that will be rendered and it needs to be in state as an array that is updated in a single setState

这是 codesandbox 上的有效示例.

这篇关于使用数据时的材质UI线性进度动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！