javascript - 无法读取未定义的属性 '__reactAutoBindPairs' - React.js

Question

我正在尝试使用 Coffeescript 和 Node.js 在 React 中创建一个简单的组件。但是，它不断抛出这个错误:

Cannot read property '__reactAutoBindPairs' of undefined

这是我的代码:

索引.咖啡:

express = require('express')
JSX     = require('node-jsx').install()
React   = require('react')
TestApp = require('../components/Test.react')
router  = express.Router()

# home page
router.get '/', (req, res, next) ->
  React.renderComponent (TestApp {}), document.getElementById('test')
  res.render 'index', title: 'Example'

module.exports = router

测试.react.coffee:

React = require('react')

TestApp = React.createClass
    render: ->
      p "Hello!"

module.exports = TestApp

索引. Jade

extends layout

block content
  h1= title
  #test 
  p Welcome to #{title}

如有任何帮助，我们将不胜感激。谢谢!

Answer 1

我认为你需要做一些事情:

1. 安装 ReactDOM 包(npm install react-dom)。
2. 需要 ReactDOM。
3. 将组件的 require() 语句包装在 React.createFactory() 中。
4. 使用 ReactDOM.render() 而不是 React.renderComponent() 渲染组件。

观察:

express  = require('express')
JSX      = require('node-jsx').install()
React    = require('react')
ReactDOM = require('react-dom')
TestApp  = React.createFactory(require('../components/Test.react'))
router   = express.Router()

# home page
router.get '/', (req, res, next) ->
  ReactDOM.render (TestApp {}), document.getElementById('test')
  res.render 'index', title: 'Example'

module.exports = router

参见 the React blog寻求解释。