javascript - 需要帮助使用 React.js 制作无意义的记分牌

Question

好的。所以我想为一个正在做测验的朋友制作一个无意义的记分牌应用程序。对于不知道的人来说，Pointless 是游戏节目的名称。这是我要实现的目标的剪辑（https://www.youtube.com/watch?v=cmdAQHzNYF8）。对，所以我的应用组件看起来像这样

import React, { Component } from 'react';
import Countdown from './components/Countdown';
import StartCountdownForm from './components/StartCountdownForm';

import './App.css';

class App extends Component {

  state = {
    points: [],
    score: 100,
    targetScore: 0,
  };

  componentWillMount() {
    let p = [];
    for (let i = 0; i < 100; i++) {
      p.push(<div className="point"></div>);
    }
    this.setState({
      points: p
    });
  }
  removeTopPoint () {
    var tmp = this.state.points; 
    tmp.splice(0, 1);
    this.setState( prevState => ({
      score: prevState.score -= 1,
      poins: tmp
    }));
  }

  render() {
    return (
      <div className="pointless-container">
        <Countdown score={this.state.score} />
          <div className="points-container">
          { this.state.points.map( (point, index) =>
            <div className="point"
              key={index}></div>
            )}
          </div>
          <StartCountdownForm />
      </div>
    );
  }
}

export default App;

好的，首先；我不太清楚如何正确启动我的点数组。我尝试在状态下启动它（类似点：new Array(100)），但我无法让它工作。在我看来，只要有一个包含 100 个位置的数组就足够了，但我可能错了，我欢迎使用其他方法来实现它。截至目前，我使用 componentWillMount 函数填充数组，然后循环遍历它以每次打印出相同的 div。是的，我知道它是迟钝的，但我不知道如何正确地做到这一点。所以这是第一件事。其次，我希望用户可以输入目标分数以使倒计时停止。我写了函数 removeTopPoint()，它有点用。所以我' 我认为应该可以一遍又一遍地调用这个函数，直到我在 setInterval() 之类的帮助下达到目标分数。但我正在努力让它发挥作用。我得到的最接近的倒计时在目标分数处停止，但所有点同时被删除。我要他们一一消失。我可能还想先给每个点添加一个类，然后再删除它，这样我就可以做出与实际展示类似的效果。我没有在此处包含 Countdown 组件或 StartCountdownForm 组件，因为到目前为止它们确实没有编写任何逻辑。希望有人能帮忙！我真的很感激。但同时删除的所有点。我要他们一一消失。我可能还想先给每个点添加一个类，然后再删除它，这样我就可以做出与实际展示类似的效果。我没有在此处包含 Countdown 组件或 StartCountdownForm 组件，因为到目前为止它们确实没有编写任何逻辑。希望有人能帮忙！我真的很感激。但同时删除的所有点。我要他们一一消失。我可能还想先给每个点添加一个类，然后再删除它，这样我就可以做出与实际展示类似的效果。我没有在此处包含 Countdown 组件或 StartCountdownForm 组件，因为到目前为止它们确实没有编写任何逻辑。希望有人能帮忙！我真的很感激。

标签： javascriptreactjs