如何使用 coffeescript 插入一个 React 组件？答案

【问题标题】：How to interpolate a React Component using coffeescript?如何使用 coffeescript 插入一个 React 组件？
【发布时间】：2016-06-25 13:44:18
【问题描述】：

我想在组件 Title 中调用组件 Icon 但我尝试的所有方法都会引发语法错误或像纯文本一样打印：

我的代码：

{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>`

我是根据这个教程来的

【问题讨论】：

标签： reactjs coffeescript

【解决方案1】：

我是这样做的：

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

【讨论】：

超级！谢谢你。完美运行！

【解决方案2】：

为了获得更易读的代码，我使用这个实用函数创建了类工厂而不是 React 类：

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"

【讨论】：

看起来不错，你能给我解释一下classFactory吗？谢谢！
Icon 不是一个 React 类（你需要传递给 React.createElement），classFactory 返回一个为你创建类的函数。您只需传入属性和子节点。它最终会做同样的事情，只是看起来更干净一些。