React.js, Flux, CofeeScriptで試作したメモ
環境
- reactjs
- Fluxxor
- CoffeeScript
- react-bootstrap
JSXのCompile
最初CoffeeScriptでReactJS環境を構築したメモ
に従って、coffee-reactを使用して見たが、
素のJsxコンパイラではエラーにならない所がエラーになってしまったので、
JsxファイルでComponentの記述のみ行い、CoffeeScriptは別ファイルで
開発する事にした。
Flux,Action,Store,HandlerはCoffeeScriptファイルに記述する。
$w.flux = new Fluxxor.Flux()
$w.commonStore=new $c.CommonStore;
$w.flux.addStore("COMMON",$w.commonStore)
$w.flux.addActions($c.actions)
$w.FluxMixin = Fluxxor.FluxMixin(React)
$w.StoreWatchMixin = Fluxxor.StoreWatchMixin
$w.common=$w.flux.stores.COMMON
StateとPropについて
Stateは最上位のComponentである Applicationにのみ定義、
下位のComponentにはPropで伝達する。なお $w.fluxは、
Applicationにflux propとして定義する。
React.render(<$w.Application flux={$w.flux}/>, document.getElementById('content'));
Global変数の使用
今回は、参照しやすさを優先して下記のGlobal変数を使用した。
- $c - 共通Coffee Fileで使用するGlobal変数
- $w - 画面単位のCoffee Fileで使用するGlobal変数
以下に例を示す
- $c.constants - 共通で使うDispach 定数
- $c.actions - 共通で使うAction
- $c.CommonStore - 共通で使うStore
- $c.XXX - 共通で使う関数等
- $w.flux - Fluxxorのインスタンス
- $w.common - CommonStoreのインスタンス
- $w.app - 最上位Compnent Applicationのインスタンス
onChange,onClick等のHandlerについて。
CoffeeScriptファイルに、Global定義
以下に例を示す
- $w.handleChange
- $w.handleClick
各Componentは、Name Propertyで例えば"search#loginId"と指定した物を
共通のHandlerで、この例であれば state.search.loginIdの値をonChange
eventにより、更新する。（setState functionで）
stateを階層構造にする事により、Form単位のデータの取得が一括で出来る。
onClickの場合は、Name Property判断して当該処理を行う。
尚一部 Componentで Name Propertyが無い場合はIDで行う。
getStateFromFlux
onChange eventでStoreからstateにCopyするFunctionは以下の様に記述する。
Storeでは、this.data以下にstateにCopyされる変数を置く。
lodashのcloneDeepを使用する。
getStateFromFlux: function() {
return {
common:_.cloneDeep($w.common.data)
};
},
Storeの管理するstateとApplicationの管理するstateの分離
上記の様に使い分けています。
Tableで Storeで Ajaxで取り込んだものを Inlineで編集する場合は、
両方に該当してしまいますので、Storeで取り込んだものをchange以外のevent
を emitして、Store管理からApplication管理にCopyしています。
$w.rcdStore.on("rcdComplete_login", ->
rcdLogin=_.cloneDeep($w.app.state.rcd.login)
loginTemp={
login:$w.app.state.login
}
loginTemp.login.rcds=rcdLogin.rcds
loginTemp.form=rcdLogin.rcd
loginTemp.login.selRow=rcdLogin.selRow
$w.app.setState(loginTemp)
)
react-bootstrapを使用していて、InputのDomNodeが取れなかった場合
refに値をsetして、this.refs["refの値"].getDOMNode() で取れると思ったのですが、
react-bootstrapのInput componentでは取れませんでした。
素の<input> componentを使用する必要がありました。
その後調べた所、getInputDOMNode()というHelper Methodを使用すれば良いそうです。
動的に複数行のレンダリングを行う場合。
下記のSelect componentを参考にして下さい。
var b = ReactBootstrap;
$c.SelectOption = React.createClass({
handleChange: function (e) {
this.props.onChange(e);
},
render: function() {
var options = this.props.options.map(function(opt, i){
return <option key={i} value={opt.value} label={opt.label}>{opt.label}</option>;
}, this);
return (
<b.Input type="select" label=''
defaultValue={this.props.defaultValue}
multiple={this.props.multiple}
name={this.props.name} style={this.props.style}
onChange={this.handleChange}
>
{options}
</b.Input>
);
}
});
mapでArrayに入れ、それをrenderで展開する方法です。