Состояние обновления 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..."

Комментарии:

- @props.param.test не может быть изменен так (для согласованности и должен быть неизменным).

- @props.param на самом деле является объектом внутри состояния компонента A, поэтому он должен быть обновлен с помощью @setState, что невозможно, поскольку мы находимся в дочернем элементе: (

Как я могу очистить это, чтобы иметь хороший компонент ReactJS?

Пол? Вы все еще поможете мне?: D

Ответы

Ответ 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..."