javascript - forceUpdate是否无法像我认为的那样工作？

以非常简单的react.js应用程序I created here

  <main></main>
  <section>
    <input value="abc" />
  </section>

..

data = note: ""
setNote = -> data.note = $('input').val()

display = React.createFactory React.createClass render: ->
  React.DOM.div null, "The note is:", @props.note

setNote()
rootComponent = React.render display(data), document.querySelector('main')

$('input').on 'keyup', ->
  setNote()
  rootComponent.forceUpdate()

根据我的理解of the documentation，当我在输入上键入内容时，应该设置data.note（我已经验证了），并且由于display的render方法使用了note属性，因此调用rootComponent.forceUpdate应该强制显示重新渲染并镜像输入中的文本。

但是，它仍然仅显示data.note的原始值。我是否误解了文档？

请注意，我知道通常这是您可能在使用助焊剂或回流焊时使用的一种方法，尽管我很欣赏与这些教程相关的优秀教程的任何链接，但这是一次性的，我正尝试坚持下去到这里的金属。

最佳答案

您要查找的是setProps。这会将更新的数据传递到组件并触发重新渲染。

尝试：

$('input').on 'keyup', ->
  setNote()
  rootComponent.setProps(data)

React不能通过引用传递数据，这意味着在更新您的data变量时，组件会将原始实现传递给它。



编辑：要回答您将forceUpdate用于什么的问题，请考虑以下更改的示例：

data = note: ""
setNote = -> data.note = $('input').val()

display = React.createFactory React.createClass render: ->
    React.DOM.div null, "The note is:", data.note

setNote()
rootComponent = React.render (display()), document.querySelector('main')

$('input').on 'keyup', ->
  setNote()
  rootComponent.forceUpdate()

现在注意，数据没有传递到组件，而是全局引用。当您的渲染方法包括来自react范围之外的数据并且将何时需要重新渲染组件的决定推迟到外部源时，应使用forceUpdate。

关于javascript - forceUpdate是否无法像我认为的那样工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28280779/