Question

我真的希望有人可以帮助我解决这个问题，因为我已经高低搜索无济于事，并尝试了我能想到的一切。我是ReactJS和Browserify的新手（虽然我不认为这与Browserify有关）并且似乎无法使这段代码正常工作。我一直在关注视频系列＆＃34; React.js入门，＆＃34; 5.2节介绍了Browserify并正确设置它以使用React。使用普通的旧JavaScript，我能够让它工作没有问题，但是当我尝试使用Coffee-Reactify和CoffeeScript时，一切都编译得很好，但是当我加载页面时，我收到了这个错误：

＆＃34;未捕获的TypeError：无法读取属性＆＃39; firstChild＆＃39;未定义＆＃34;

当我跟踪堆栈跟踪时，它似乎在React的findComponentRoot方法中出错，我还没有触及。这让我相信我的CoffeeScript有些不对劲，但是我已经将它与JavaScript行进行了比较，除了额外的＆＃34; return＆＃34; CoffeeScript编译器添加的语句，似乎没什么不同。如果有人可以复制或识别我的问题，我非常感谢！这是我所有文件的代码，非常感谢大家！

index.jade

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')
)

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

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部分＆＃34;工作＆＃34;因为messages数组被映射到SubMessage数组并使用删除按钮正确显示。因此，错误似乎发生在周期的后期。再次感谢！

Answer 1

哇，我的疏忽是什么。事实证明我从两个不同的地方加载了React，一次作为我的coffee / cjsx文件中的节点模块，再次在我的HTML中，但是从一个凉亭安装的React版本。我不敢相信我花了这么多时间在这上面，但希望我的斗争有助于其他人！

Coffee-Reactify编译问题

1 个答案: