over 2 years ago

過年期間,用零碎的時間研究 Livescript + React 的組合。

其實可以 Google 到一個例子,Using LiveScript with React,只是這個例子並不完整,少了一些宣告。

概念上是透過 React.createFactory 把元件變成元件工廠函數,搭配上 Livescript 的 Function Syntax 就可以寫出很類似 Jade 的效果。

簡單的範例

首先,先把常用的基本元件做成函數:

require! react: React

div = React.create-factory \div
h1 = React.create-factory \h1
p = React.create-factory \p

接著,我們用 React.createClass 做一個新元件:

comp = React.create-class do
  render: ->
    div null,
      div class-name: \container,
        h1 null, \Example
        p null, "This is an example page."

看了這段 Code 應該會有似曾相似的感覺吧。這樣就生成了一個新元件,此時可以用 React.createFactory 來形成新的工廠函數。

MyComponent = React.create-factory comp

如此一來,MyComponent 就可以在其他的元件中使用了。

← ReactJS 中的 "create" 函數 Context in React.js →
 
comments powered by Disqus