Question

我目前有一个＆＃34; datetime＆＃34;组件，显示时间表示并希望相对于当前时间更改其显示

var MDate = React.createClass({
    render: function() {
        // this.props.date is an integer
        var d = new Date(this.props.date);
        var diff = ((new Date() - d) / 1000) | 0;

        return <time>{diff} seconds ago</time>;
    }
});

（请注意，这是一个简化示例，实际代码根据差异更改格式）

我想定期刷新该组件的每个实例的组件值，但似乎React没有提供这样做的方法。

到目前为止，我已经提出了这个问题，但这似乎远非理想：

var MDate = React.createClass({
    componentWillMount: function() {
        MDate.items.push(this);
    },
    componentWillUnmount: function() {
        var i = MDate.items.indexOf(this);
        if (i > -1) {
            MDate.items.splice(i, 1);
        }        
    },
    render: function() { … }
}

MDate.items = [];

然后迭代MDate.items并为每个

调用forceUpdate（）

有没有办法列出每个已安装的MDate实例而不依赖于这个技巧？

Answer 1

使知道组件应该更新的服务发布所有组件实例在componentDidMount中侦听的事件。在该事件监听器中，您调用setState来触发您的组件重新渲染。

这样的事情：

let MDate = React.createClass({
  getInitialState() {
    return this.getState();
  },
  getState() {
    return {
      date: DateStore.get()
    };
  },
  componentDidMount() {
    DateStore.on('change', () => this.setState(this.getState()));
  },
  render() {
    let d = new Date(this.state.date);
    let diff = ((new Date() - d) / 1000) | 0;

    return <time>{diff} seconds ago</time>;
  }
});

Answer 2

您不应该从组件外部真正调用forceUpdate或setState。这是一种方法：

var MDate = React.createClass({
    componentWillMount: function() {
        this._timer = setInterval(this.update, 1000);
    },
    componentWillUnmount: function() {
        clearInterval(this._timer);
    },
    getInitialState() {
        return {
            currentDate: new Date()
        };
    },
    render: function() {
        // this.props.date is an integer
        var d = new Date(this.props.date);
        var diff = ((this.state.currentDate - d) / 1000) | 0;

        return <time>{diff} seconds ago</time>;
    },
    update() {
        this.setState({ currentDate: new Date() });
    }
}

Answer 3

谢谢，我想出了这个解决方案（使用jQuery作弊）

var MDate = React.createClass({
    getInitialState: function() {
        return {tick: new Date().getTime()};
    },
    tick: function(ev) {
        this.setState({tick: ev.timeStamp})
    },
    componentWillMount: function() {
        $(document).on('date-tick', this.tick);
    },
    componentWillUnmount: function() {
        $(document).off('date-tick', this.tick);
    },
    render: function() {…}
}

window.setInterval(function() {
    $(document).trigger('date-tick')
}, 20 * 1000);

如何列出特定类的实例？

3 个答案: