React.js – 如何以HAML风格编写代码

#经纬

最近，我读了一篇文章，发现只需稍作改进，就可以将React.js写成类似HAML的风格。

想做的事情

我希望能够像日常经常使用的HAML一样写React.js。

%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>

方法 (Fang fa)

用CoffeeScript来编写，而不是使用JSX。
虽然JSX作为一个选择已经准备好了，但根据文档写明，它并不是必需条件。

JSX是可选的，不是使用React的必要项。
你可以不使用JSX来使用React，可以直接使用纯JS。

首先，如果不使用JSX写，就会变成这样。当然，只要这样就可以排除<>。

@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 = 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部分替换为本地变量，也可以按照以下方式编写。

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

#数据

• http://facebook.github.io/react/docs/top-level-api.html

https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers