forceUpdate是否無法像我認為的那樣工作？

Question

以我在這里創建的非常簡單的react.js應用為例

  <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()

根據我對文檔的理解，當我在輸入上鍵入內容時，它應該設置data.note （我已經驗證過），並且由於display的render方法使用note屬性，因此調用rootComponent.forceUpdate應該強制顯示重新渲染和鏡像輸入中的文本。

但是，它仍然僅顯示data.note的原始值。 我是否誤解了文檔？

請注意，我知道通常這是您可能在使用助焊劑或回流焊時使用的一種方法，盡管我很欣賞與這些好的教程的任何鏈接，但這是一次性的，我正嘗試堅持下去到這里的金屬。

Answer 1

您正在尋找的是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 。