2016-03-10 49 views
1

我要調用的組件圖標在組件標題,但我試過所有的方法拋出語法錯誤或只是打印像一個純文本:<圖標/>如何使用coffeescript內插React組件?

我的代碼:

{div, h2} = React.DOM 
@Title = React.createClass 
    render: -> 
     div {className: "title page"}, [(h2 {className: 'h2header ui header block'}, '<Icon />')]) 


@Icon = React.createClass 
    render: -> 
    `<i className="icon user"></i>` 

我根據這個教程

回答

1

我做這種方式:

@Title = React.createClass 
    render: -> 
    React.DOM.div 
     className: 'title page' 
     React.DOM.h2 
     className: h2header ui header block 
     React.createElement Icon 
+0

超!謝謝。完美的作品! –

1

爲了獲得更多可讀的代碼,我創建類工廠,而不是作出反應類,使用這種效用函數:

classFactory: (spec) -> 
    c = React.createClass(spec) 
    return (attrs, children...) -> 
    React.createElement(c, attrs, children) 

然後這樣定義你的組件:

Title = classFactory 
    render: -> 
    div className: "title page", 
     h2 className: "h2header ui header block", 
     Icon {} 

Icon = classFactory 
    render: -> 
    i className: "icon user" 
+0

它看起來不錯,你能解釋一下關於classFactory的一些信息嗎?謝謝! –

+0

「Icon」是一個React類(需要傳遞給React.createElement),而不是'classFactory'返回一個爲你創建類的函數。您只需傳入屬性和子節點。它最終做同樣的事情,它看起來更清潔。 – TimK