Question

采取非常简单的react.js app 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＆＃39; s { {1}}方法使用render属性，调用note应强制显示重新渲染并镜像输入中的文本。

但它仍然只显示rootComponent.forceUpdate的原始值。我误解了文档吗？

请注意，我知道通常这是你可能会使用助焊剂或反流的东西，虽然我很欣赏任何关于这些的好教程的链接，但这是一次性的，我和＃ 39;我试图在这里靠近金属。

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

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

forceUpdate不能像我想的那样工作吗？

1 个答案: