ネストされた子どもに状態を伝える方法ワカンネ

README.md

やりたいこと

• 親側の変更を子のComponentに伝えたい
• 子にどうやって渡したらいいのかわからな
• イベント/ハンドラもどうやって渡せばいいのか

child.coffee

"use strict"
React = require "react"

Child = module.exports = React.createClass
  getInitialState: ->
    # anti-pattern とか書かれてたけど、いまいち他のやり方わかんね
    # http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html
    val: @props.val
  render: ->
    <p val={@props.val}>Child Count: {@state.val}</p>

parent.coffee

"use strict"
React = require "react"
Child = require "./child"

Parent = module.exports = React.createClass
  getInitialState: ->
    val: 0
  onClick: (ev)->
    ev.preventDefault()
    @setState val: @state.val + 2
  render: ->
    <div>
      <button onClick={@onClick}>Count Up</button>
      <p val={@state.val}>Parent Count: {@state.val}</p>
      <Child val={@state.val} />
    </div>

React.renderComponent <Parent />, document.body