Skip to content

Instantly share code, notes, and snippets.

@muddydixon
Created December 12, 2014 13:07
Show Gist options
  • Save muddydixon/7caba1664ac905cdc114 to your computer and use it in GitHub Desktop.
Save muddydixon/7caba1664ac905cdc114 to your computer and use it in GitHub Desktop.
ネストされた子どもに状態を伝える方法ワカンネ

やりたいこと

  • 親側の変更を子のComponentに伝えたい
  • 子にどうやって渡したらいいのかわからな
  • イベント/ハンドラもどうやって渡せばいいのか
"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>
"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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment