ReactJS 子组件更新状态

Question

我正在使用ReactJS和CoffeeScript（：

实际上，我有一个处理状态的组件A。状态字段传递给子组件（在此示例中称为myChild）。子组件需要更新来自父状态的一些值。

如何用ReactJS的方式来做到这一点？

我正在使用ReactJS和CoffeeScript（：

实际上，我有一个处理状态的组件A。状态字段传递给子组件（在此示例中称为myChild）。子组件需要更新来自父状态的一些值。

如何用ReactJS的方式来做到这一点？

A = React.createClass
  getInitialState: 
    mystate: {test: 1}

  render: ->
    myChild {param: @state.mystate}


myChild = React.createClass
  render: ->
    React.DOM.div {onClick: @change}, @props.param.test

  change: ->
    @props.param.test += 1 # WRONG WRONG WRONG
    ajax("/..../", JSON.stringify(@props.param))
      .done(@onDone).fail(...)

  onDone: ->
    console.log "Hum..."

评论：

[e-mail]不能这样更改（为了一致性，它应该是不可变的）。

[e-mail]实际上是组件A状态内部的对象，因此应该使用@setState进行更新，但由于我们在子级中，所以无法实现:(

如何清除这个问题，以获得良好的ReactJS组件？

保罗？你还会帮助我吗？:D

- Yves Lange

---

我猜解决方案应该是：1）创建@props.param的克隆，然后更新@props.param.test2）进行ajax请求3）重新加载父组件？但如何重新加载父组件？ - Yves Lange

Answer 1

父组件是真相的来源，因此子组件需要告诉父组件改变其状态。将回调函数从父组件传递给子组件，并让子组件调用它。

在React文档中有一个关于组件间通信的示例，可能也会有所帮助。

A = React.createClass
  getInitialState: ->
    mystate: {test: 1}

  incrementTest: ->
    @setState {mystate: {test: @state.mystate.test + 1}}

  render: ->
    myChild {onChange: @incrementTest, param: @state.mystate}


myChild = React.createClass
  render: ->
    React.DOM.div {onClick: @change}, @props.param.test

  change: ->
    @props.onChange
    ajax("/..../", JSON.stringify(@props.param))
      .done(@onDone).fail(...)

  onDone: ->
    console.log "Hum..."

- Ross Allen

---

很好，我忘记了回调函数的解决方案 :) - Yves Lange