如何使用coffeescript内插React组件？

我要调用的组件图标在组件标题，但我试过所有的方法抛出语法错误或只是打印像一个纯文本：<图标/>如何使用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>`

我根据这个教程

来源

2016-03-10 Brian Stanley

我做这种方式：

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

来源

2016-03-10 16:00:40

超！谢谢。完美的作品！ –

为了获得更多可读的代码，我创建类工厂，而不是作出反应类，使用这种效用函数：

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"

来源

2016-03-10 17:33:00 TimK

它看起来不错，你能解释一下关于classFactory的一些信息吗？谢谢！ –

“Icon”是一个React类（需要传递给React.createElement），而不是'classFactory'返回一个为你创建类的函数。您只需传入属性和子节点。它最终做同样的事情，它看起来更清洁。 – TimK

如何使用coffeescript内插React组件？

回答

相关问题