javascript - React JS - 实时时钟更新

coder 2025-01-25 原文

我有一个时钟函数可以获取时间并显示小时、分钟和秒，我正在尝试实时更新屏幕上的数据，但由于某种原因我的 setInterval 函数没有执行此操作我期待。

我以为react的render方法应该是实时渲染数据。我需要ajax吗？谁能提供一些建议？

var CityRow = React.createClass({

  render: function() {

    var currentdate = new Date();

    function getTime() {
      // get local time based on the UTC offset
      this.hours = currentdate.getUTCHours() + parseInt(this.props.UTCOffset);    

      // correct for number over 24, and negatives
      if( this.hours >= 24 ){ this.hours = this.hours - 24; }
      if( this.hours < 0   ){ this.hours = this.hours + 12; }

      // add leading zero, first convert hours to string
      this.hours = this.hours + "";
      if( this.hours.length == 1 ){ this.hours = "0" + this.hours; }

      // minutes are the same on every time zone
      this.minutes = currentdate.getUTCMinutes();

      // add leading zero, first convert hours to string
      this.minutes = this.minutes + "";
      if( this.minutes.length == 1 ){ this.minutes = "0" + this.minutes; }

      this.seconds = currentdate.getUTCSeconds();
    }

    window.setInterval(function () {
      getTime();
    }, 1000);

    return(
      <div className="city-row" ref="cityRow">
        <span className="city-time">{this.hours}:{this.minutes}:{this.seconds}</span>
        </div>
      </div>
    )
  }
});

最佳答案

官方的 React 文档准确描述了您的需求(甚至解释了为什么您应该按照描述的那样去做):

--> React Docs: State and Lifecycle

Example on CodePen :

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

关于javascript - React JS - 实时时钟更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32880484/

有关javascript - React JS - 实时时钟更新的更多相关文章

ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2
给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？最佳答案在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru
ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2
我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。最佳答案如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数
objective-c - 在设置 Cocoa Pods 和安装 Ruby 更新时出错 - 2
我正在尝试为我的iOS应用程序设置cocoapods但是当我执行命令时:sudogemupdate--system我收到错误消息:当前已安装最新版本。中止。当我进入cocoapods的下一步时:sudogeminstallcocoapods我在MacOS10.8.5上遇到错误:ERROR:Errorinstallingcocoapods:cocoapods-trunkrequiresRubyversion>=2.0.0.我在MacOS10.9.4上尝试了同样的操作，但出现错误:ERROR:Couldnotfindavalidgem'cocoapods'(>=0),hereiswhy:U
ruby-on-rails - Rails Associations 的更新方法是什么？ - 2
这太简单了，太荒谬了，我在任何地方都找不到关于它的任何信息，包括API文档和Rails源代码:我有一个:belongs_to关联，我开始理解当您没有关联时您在Controller中调用的正常模型方法与您有关联时调用的方法略有不同。例如，我的关联在创建Controller操作时运行良好:@user=current_user@building=Building.new(params[:building])respond_todo|format|if@user.buildings.create(params[:building])#etcetera但我找不到关于更新如何工作的文档:@user
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby-on-rails - OSX Yosemite 更新破坏了 pow.cx - 2
升级到OSXYosemite后，我现有的pow.cx安装不起作用。升级到最新的pow.cx无效。通过事件监视器重新启动它也没有成功。最佳答案卸载(!)并重新安装解决了这个问题。curlget.pow.cx/uninstall.sh|shcurlget.pow.cx|sh 关于ruby-on-rails-OSXYosemite更新破坏了pow.cx，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/q
ruby - 将 Gitlab 从 9.3.7 更新到 9.3.8 安装 re2 时出错 - 2
我们在Ubuntu14.04和Gitlab9.3.7上运行，运行良好。我们正在尝试更新到Gitlabv9.3.8的最新安全补丁，但它给我们这个错误:Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension.currentdirectory:/home/git/gitlab/vendor/bundle/ruby/2.3.0/gems/re2-1.0.0/ext/re2/usr/local/bin/ruby-r./siteconf20170720-19622-15i0edf.rbextconf.rbcheckingformain(
ruby-on-rails - Rails 更新属性 - 2
我遇到了以下问题。我有一个名为user的模型，它有一个名为activated的列。我试图通过激活的方法更新该值？但它给我错误:验证失败:密码不能为空，密码太短(最少6个字符)这对我来说没有意义，因为我没有接触密码字段!我只想更新激活的列。我把我认为相关的代码放在这里，但如果你认为你需要更多，请问:)非常感谢您!型号:attr_accessor:passwordattr_accessible:name,:email,:password,:password_confirmation,:activatedhas_many:sucu_votesemail_regex=/\A[\w+\-.]+@
ruby-on-rails - 如果存在则更新，否则什么也不做？ - 2
当且仅当模型存在时，我才尝试更新模型的值。如果没有，我什么都不做。搜索似乎只返回更新或创建问题/答案，但我不想创建。我知道我可以用一个简单的方法来做到这一点:found=Model.find_by_id(id)iffoundupdatestuffend但是，我觉得有一种方法可以在一次调用中完成此操作，而无需分配任何临时本地值或执行if。如果记录不存在，我该如何编写一个Rails调用来更新记录而不出现嘈杂错误？最新的Rails3.x 最佳答案您可以使用try在对find_by_id或where的结果调用update_attribut
ruby-on-rails - 如何在记录更新期间从验证中排除密码字段？ ( rails 3.0.4， ruby 1.9.2) - 2
我有一个允许更新用户记录的表单。它包含:password和:password_confirmation字段，但我不希望在数据库中已存储加密密码时对它们运行验证。View文件中的字段:'ConfirmPassword'%>在互联网上搜索时，我发现了这段代码，我认为它是针对以前版本的Ruby/Rails的。(我会把它放在我的用户模型中。)validates_presence_of:password,:on=>create由于我的用户模型中密码验证的语法不同(如下)，我对我需要的语法感到困惑。validates:password,:presence=>true,:confirmation=>

javascript - React JS - 实时时钟更新

有关javascript - React JS - 实时时钟更新的更多相关文章

随机推荐