Coffeescript 咖啡反应汇编问题

我真的很希望有人能帮我解决这个问题，因为我到处找都找不到，想尽了一切办法。我是ReactJS和Browserify的新手（尽管我不认为这与Browserify有任何关系），而且似乎无法让这段代码正常工作。我一直在关注视频系列“React.js入门”，第5.2节介绍了Browserify，并正确设置它以与React一起使用。使用简单的旧JavaScript，我可以让它正常工作，但当我尝试使用Coffee Reactify和CoffeeScript时，一切都可以正常编译，但当我加载页面时，我会出现以下错误：

“未捕获的TypeError:无法读取未定义的属性'firstChild'”

当我跟踪堆栈跟踪时，在React的findComponentRoot方法中似乎出现了错误，我没有接触到它。这让我相信我的CoffeeScript有问题，但我将它与JavaScript逐行比较，除了CoffeeScript编译器添加的附加“return”语句之外，没有什么太大的不同。如果有人能复制或识别我的问题，我将不胜感激！这是我所有文件的代码，非常感谢大家

翡翠索引

doctype html
html
  head
    meta(charset='utf-8')
    title React Tools
    link(rel='stylesheet', href='bower_components/bootstrap/dist/css/bootstrap.css')

  body
    #app
    script(src='bower_components/lodash/dist/lodash.js')
    script(src='bower_components/react/react.js')
    script(src='build/app.js')

app.coffee

MessageBox = require('./MessageBox.cjsx')

reactComponent = React.render(
  <MessageBox />,
  document.getElementById('app')
)

MessageBox=require（'./MessageBox.cjsx'）
reactComponent=React.render(
,
document.getElementById（'app'）
)

SubMessage.cjsx

SubMessage = React.createClass

handleDelete: (e) ->
    @props.onDelete(@props.message)

propTypes:
  message: React.PropTypes.string.isRequired

getDefaultProps: ->
  message: "It's good to see you"

render: ->
  <div>
    {@props.message}
    <button onClick={@handleDelete} className='btn btn-danger'>x</button>
  </div>

module.exports = SubMessage

SubMessage=React.createClass
handleDelete：（e）->
@props.onDelete（@props.message）
道具类型：
消息：React.PropTypes.string.isRequired
getDefaultProps:->
信息：“很高兴见到你”
渲染：->
{@props.message}
x
module.exports=子消息

MessageBox.cjsx

React = require 'react'
SubMessage = require './SubMessage.cjsx'

MessageBox = React.createClass

  deleteMessage: (message) ->
    newMessages = _.without(@state.messages, message)
    @setState
      messages: newMessages

  handleAdd: (e) ->
    newMessage = @refs.newMessage.getDOMNode().value
    newMessages = @state.messages.concat [newMessage]
    @setState
      messages: newMessages

  getInitialState: ->
    isVisible: true,
    messages: [
      'I like the world',
      'Coffee flavored ice cream is underrated',
      'My spoon is too big',
      'Tuesday is coming.',
      'I am a banana'
    ]

  render: ->

    inlineStyles =
      display: if @state.isVisible then 'block' else 'none'

    messages = @state.messages.map ((message) ->
      <SubMessage message={message} onDelete={@deleteMessage} />
    ).bind(@)

    return (
      <div className='container jumbotron' style={inlineStyles}>
        <h2>Hello, World</h2>
        <input ref='newMessage' type='text' />
        <button className='btn btn-primary' onClick={@handleAdd}>Add</button>
        { messages }
      </div>
    )

module.exports = MessageBox

React=需要“React”
SubMessage=require./SubMessage.cjsx'
MessageBox=React.createClass
删除消息：（消息）->
newMessages=u389;。不带（@state.messages，message）
@设定状态
信息：新信息
手写：（e）->
newMessage=@refs.newMessage.getDOMNode（）.value
newMessages=@state.messages.concat[newMessage]
@设定状态
信息：新信息
getInitialState:->
可见：是的，
信息：[
“我喜欢这个世界”，
“咖啡味冰淇淋被低估了”，
“我的勺子太大了”，
“星期二就要到了。”，
“我是香蕉”
]
渲染：->
内联风格=
显示：如果@state.isVisible，则为“阻止”，否则为“无”
messages=@state.messages.map（（消息）->
).bind（@）
返回(
你好，世界
添加
{消息}
)
module.exports=MessageBox

---

作为旁注，React部分“工作”，因为messages数组映射到子消息数组，并使用delete按钮正确显示。因此，这个错误似乎发生在周期的后期。再次感谢

哇，我真是疏忽了。事实证明，我是从两个不同的地方加载React的，一次是作为coffee/cjsx文件中的节点模块，另一次是作为HTML中的节点模块，但是是从bower安装的React版本加载的。我不敢相信我在这上面花了这么多时间，但希望我的努力能帮助别人

如果可以的话，我会在明天将此标记为已解决，但我仍然觉得有点奇怪，当不使用CoffeeScript而仅使用JavaScript时，相同的问题没有出现，尽管React仍被加载了两次。我对咖啡反应知之甚少，但我怀疑它可能是罪魁祸首。如果有人对此有所了解，请保持此线程的活力，因为我可以看到它在未来对其他人有帮助。