流星倒计时+反应

Question

我正在使用Meteor和React实现任务跟踪应用程序的倒计时。这是组件：

import React from 'react';
import DetailTask from './DetailTask';
import {Meteor} from "meteor/meteor";
import moment from 'moment';


export default class Task extends React.Component {


constructor(props) {
    super(props);
    this.state = {
        showComponent: false,
        startMessage: "",
        finishMessage: ""
    }
}

componentDidMount() {
    Tracker.autorun(() => {
        let myCursor = tasks.findOne({_id: this.props.task._id});
        let started = myCursor.started;
        if (started === true) {
            let finishTime = myCursor.finishTime;
            let myVar = setInterval(myCountdown, 1000);

            function myCountdown() {
                let now = moment().format('LTS');
                let start = moment.utc(now, "HH:mm:ss");
                let end = moment.utc(finishTime, "HH:mm:ss");
                let duration = moment.duration(end.diff(start));
                console.log(duration.hours(), duration.minutes(), duration.seconds());
                // here I should access the DOM
            }
        } else {
            console.log("This task hasn't started");
        }
    });
}

detailTask(e) {
    console.log('Now the detailed component will be displayed ');
    this.setState({
        showComponent: true,
    });
}

removeTask(e) {
    const taskId = this.props.task._id;
    //console.log(taskId);
    Meteor.call('tasks.remove', taskId);
}

startTask(e) {
    // first it updates the started field in the db
    // then it should make a call to a meteor function
    // passes the id of the task as argument
    // converts the duration to hours
    // and starts the countdown which will be provided
    // as an external file
    let myCursor = tasks.findOne({_id: this.props.task._id});
    let duration = myCursor.duration;
    console.log('Now the task should start');
    Meteor.call('tasks.started', this.props.task._id, duration);
    this.setState({
        startMessage: " Keep yourself productive. Don't forget, we are what we repeat ! "
    });
}

finishTask() {
    Meteor.subscribe('stats');
    console.log('Here you will finish the task manually');
    Meteor.call('tasks.finished', this.props.task._id);
    this.setState({
        finishMessage: " Nailed it ! "
    });
    Meteor.call('stats.insert', Meteor.userId(), this.props.task._id);
    // first it should update the finished field in the db
}

render() {
    return (
        <div key={this.props.task._id}>
            <p>Here the photo of the task will be.</p>
            <p>This is the task name: {this.props.task.taskName}</p>
            <p>This task has duration: {this.props.task.duration}</p>
            <button onClick={this.detailTask.bind(this)}>View Details</button>
            <button onClick={this.startTask.bind(this)}>Start Task</button>
            <button onClick={this.removeTask.bind(this)}>Remove Task</button>
            <button onClick={this.finishTask.bind(this)}>Finish Task</button>
            <p>Here the countdown will be displayed.</p>
            <div id="countdown">
                <div>
                    <h5>Hours</h5>
                    <span className="hours" ref={"hours"}>0</span>
                </div>
                <div>
                    <h5>Minutes</h5>
                    <span className="minutes" ref={"minutes"}>0</span>
                </div>
                <div>
                    <h5>Seconds</h5>
                    <span className="seconds" ref={"seconds"}>0</span>
                </div>
            </div>
            {this.state.showComponent ?
                <DetailTask id={this.props.task._id} taskName={this.props.task.taskName}/> :
                null}
            {this.state.startMessage ? <p>{this.state.startMessage}</p> :
                null}
            {this.state.finishMessage ? <p>{this.state.finishMessage}</p> :
                null}
        </div>
    );
}
}

我主要关心的是 componentDidMount（）功能。在那里我搜索数据库中的特定任务，然后检查任务是否已经开始。 如果是这样，我检索预期的完成时间并计算现在和每秒预期完成时间之间的差异。我有控制台记录倒计时，它适用于两个不同的任务。我的问题是如何使用DOM，以便我可以为每个任务渲染倒计时。我创建了一个倒计时结构，但我不知道如何访问它。我尝试过使用this.refs，但它没有用。有什么想法吗？