React.js - HAML風に書く方法

18742 ワード
haml React CoffeeScript CoffeeScript テキストリンク

経緯

先日ある記事を読んでいて、少し工夫するだけでReact.jsをHAML風に書くことができることに気がついた。

やりたいこと

React.jsを日頃よく使うHAMLのように書きたい。

目標
%div
  %table
    %thead
      %tr
        %th 'Name'
        %th 'Vol'
        %th 'Qty'
        %th 'Subtotal'
        %th 'Room'
        %th 'Category'
        %th 'Description'
        %th ''
    %tbody
      = render @records

普通にJSX + CoffeeScriptで書くと以下の様になる。＜＞を排除したい。

@Records = React.createClass
  #...
  render: ->
     <div>
       <table className='table table-bordered'>
         <thead>
           <tr>
             <th>Name</th>
             <th>Vol</th>
             <th>Qty</th>
             <th>Subtotal</th>
             <th>Room</th>
             <th>Category</th>
             <th>Description</th>
             <th></th>
           </tr>
         </thead>
         <tbody>
           { for record in @state.records
               <Record key={record.id} record={record}
                       handleDeleteRecord={this.deleteRecord}
                       handleEditRecord={this.updateRecord} />
           }
         </tbody>
       </table>
     </div>

やりかた

１. JSXを使用せず、CoffeeScriptで書く

JSXは選択肢として用意されているが、必要条件ではないとドキュメンテーションに書かれている。

JSX is optional and not required to use React.
You don't have to use JSX with React. You can just use plain JS.

先ず、JSXを使用せず書くとこんな感じになる。当たり前だが、これだけで＜＞を排除可能。

records-2.js.coffee

@Records = React.createClass
  #...
  render: ->
    React.DOM.div null,
      React.DOM.table
        className: 'table table-bordered'
        React.DOM.thead null,
          React.DOM.tr null,
            React.DOM.th null, 'Name'
            React.DOM.th null, 'Vol'
            React.DOM.th null, 'Qty'
            React.DOM.th null, 'Subtotal'
            React.DOM.th null, 'Room'
            React.DOM.th null, 'Category'
            React.DOM.th null, 'Description'
            React.DOM.th null, ''
        React.DOM.tbody null,
          for record in @state.records
            React.createElement Record,
              key:    record.id,
              record: record,
              handleDeleteRecord: @deleteRecord,
              handleEditRecord:   @updateRecord

2. 更にReact.DOM.xxxをローカル変数に置き換えるとHAML風になる。

records-3.js.coffee
@Records = React.createClass
  #...
  render: ->
    div   = React.DOM.div
    table = React.DOM.table
    thead = React.DOM.thead
    tr    = React.DOM.tr
    th    = React.DOM.th
    tbody = React.DOM.tbody

    div null,
      table
        className: 'table table-bordered'
        thead
          tr null,
            th null, 'Name'
            th null, 'Vol'
            th null, 'Qty'
            th null, 'Subtotal'
            th null, 'Room'
            th null, 'Category'
            th null, 'Description'
            th null, ''
        tbody null,
          for record in @state.records
            React.createElement Record,
              key:    record.id,
              record: record,
              handleDeleteRecord: @deleteRecord,
              handleEditRecord:   @updateRecord

3. React.DOMの部分のみをローカル変数に置き換え、以下の様に書くことも可能。

records-4.js.coffee
R = React.DOM

@Records = React.createClass
  #...
  render: ->
    div null,
      table
        className: 'table table-bordered'
        R.thead
          R.tr null,
            R.th null, 'Name'
            R.th null, 'Vol'
            R.th null, 'Qty'
            R.th null, 'Subtotal'
            R.th null, 'Room'
            R.th null, 'Category'
            R.th null, 'Description'
            R.th null, ''
        R.tbody null,
          for record in @state.records
            React.createElement Record,
              key:    record.id,
              record: record,
              handleDeleteRecord: @deleteRecord,
              handleEditRecord:   @updateRecord

資料