0

我有一个商店，它的数据每秒增加 1。

我希望我的组件为一个矩形设置动画，随着数据的增加“水平填充”，基本上：

0
[       ]
0.2 #conceptually
[=      ]
0.5  #conceptually
[====   ]
0.75 #conceptually
[=====  ]

问题是我的商店没有通过这个“值”（0、0.2、0.5），而是每秒增加 1。

那是我的问题-> 存储数据不通过其间的值，因此，如果我的组件宽度接收数据，它显然只会在宽度上跳跃。

我正在考虑在渲染循环中设置状态，以便我可以手动减少状态变量。但是这是不可能的，因为我不能在渲染循环中调用 setState。

MyStore = Reflux.createStore
  init: ->
    @listenTo MyAction, @onStart

    @getAllSurvivors()
  onStart: ->
    @time = 10
    @iter true
    @trigger @survivors

  healUp: (first)->
    @time += 1 if not first

    if not timeoutID
      timeoutID = setTimeout =>
        unless @time >= 100
          timeoutID = false
          @iter false
        else
          @trigger @time
      , 
        1000

    @trigger @time


MyComp = React.createClass
  #link @state.time to store
  render: ->
      return (
        <ul>
          <li> { @state.time } </li>
          <!-- The Problem -->
          <div> This should be a loading bar as '@state.time' increments </div>
        </ul>
      );

我应该如何在 ReactJS 中处理这个问题？使我的数据变为中间值（0.2、0.5...）似乎很糟糕，因为它更像是 UI 而非数据。

4

1 回答 1

2

你的目标浏览器是什么？也许您可以使用 CSS3 快速实现您的目标？在您的 div 元素上使用它：

transition: width 2s, transform 2s;
于 2015-01-12T09:57:09.077 回答