iT邦幫忙

DAY 19
0

Reactjs 30 天邊做邊學系列系列 第 19

Reactjs Day 19 - 處理 CSS 樣式

  • 分享至 

  • xImage
  •  

操作樣式名稱(Class)
classSet() 是一個協助您快速操作 DOM 裏 class 字串的工具。
這裡有一些常見的情況,當沒有使用 classSet() 的時候:

/**
 * @jsx React.DOM
 */
var ClassSet = React.createClass({
  render: function () {
    var classString = 'message';
    if (this.props.isImportant) {
      classString += ' message-important';
    }
    if (this.props.isRead) {
      classString += ' message-read';
    }
    return (
      <div className={classString}>Great, I'll be there</div>
    )
  }
});

React.renderComponent(
  <ClassSet isRead='1' isImportant='1' />,
  document.getElementById('example')
)

你可能因為一些 CSS Class 設定的問題而開始組合字串,但很顯然的這是個很無聊瑣碎的工作。
而且這種做法程式碼很難閱讀且易出錯。這個時候 classSet() 可以幫你解決這個問題。

/**
 * @jsx React.DOM
 */
var ClassSet = React.createClass({
  render: function () {
    var cx = React.addons.classSet;
    var classes = cx({
      'message': true,
      'message-important': this.props.isImportant,
      'message-read': this.props.isRead
    })
    return (
      <div className={classes}>Great, I'll be there</div>
    )
  }
});

React.renderComponent(
  <ClassSet isRead='1' isImportant='1' />,
  document.getElementById('example')
)

其他補充事項:
只要看到程式中使用了 React.addons.*, React 記得使用 react-with-addons 的版本,另外有些屬性名稱因為跟程式關鍵字衝突會有變更,這裡的 class 就變成 className,另外一個常遇到的是 for 要改成 htmlFor。

return (
  <div className={classes}>
    <label htmlFor='boy'>Boy</label>
    <input type='radio' id='boy' name='sex'/>
    <label htmlFor='girl'>Girl</label>
    <input type='radio' id='girl' name='sex'/>
  </div>
)

當我們使用 classSet() 時,我們傳入一個物件,其中的 key 屬性名稱就是 CSS class 樣式。當它設成 Truthy values 的時候就表示要套用,這個樣式名稱會自動加入串接的字串中。

Truthy values 指的是只要 Javascript 判斷為真即可,並不是一定要 true,舉例來說 1, string, Object 都是 Truthy values 。
不要再使用串字串的方式了!


上一篇
Reactjs Day 18 - React 也有 Two-way Binding
下一篇
Reactjs Day 20 - 單元測試
系列文
Reactjs 30 天邊做邊學系列30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言