Question

我是React开发的新手，我有一个正在工作的组件，但是现在确定这是否是处理状态的正确方法。该组件是基本的旋转列表。样本[1, 2, 3]变成[2, 3, 1]，然后变成[3, 1, 2]，依此类推。我通过在状态的切片旧数组中创建一个新数组，并在setState内用setInterval编写了它。

无限循环是否每隔X秒重写一次数组，这是在React中完成数组的一种可接受的方法吗？

此外，对其进行动画处理的最佳方法是什么？就像，如果每2秒第一项变成最后一项，如果我在数组的第一项上添加2秒动画，并在2秒内将其height从100％降低到0％，我应该以“平滑”结束旋转列表，对吧？

以下是靠近组件代码的示例：

class RotatingList extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      'myItems': [
        {'description': 'my 1st item'},
        {'description': 'my 2nd item'},
        {'description': 'my 3rd item'},
        {'description': 'my 4th item'},
        {'description': 'my 5th item'},
      ]
    }
  }
  componentDidMount(){
    setInterval(() => {
      this.setState((state, props) => {
          return {tasks: [...state.tasks.slice(1,), ...state.tasks.slice(0,1)],}
      })
    }, 1000*2) // rotate list every 2 secs
  }
  render(){
    return (
      <ul>{this.state.tasks.map((task, i) => {
        return (
          <MyItem key={i} description={task.description} />
        )
      })}</ul>
    )
  }
}

export default RotatingList;

在React状态下旋转数组项的正确方法

0 个答案: