2015-07-03 51 views
3

我目前正试图在我的node.js + express构建中实现一个同构反应组件。然而,当我尝试上述组件包括了我的玉模板来渲染它,我得到这个错误:类型错误:无法添加属性方面,对象是不可扩展Node.js反应:无法添加属性上下文,对象不可扩展

这里是我的路线文件:

var express = require('express'); 
var router = express.Router(); 


var React = require('react/addons'), 
    ReactApp = React.createFactory(require('../../react/components/ReactApp')); 

/* GET home page. */ 
router.get('/', function(req, res, next) { 
    var reactAppEl = ReactApp(); 
    console.log(reactAppEl); 
    var reactHtml = React.renderToString(reactAppEl); 
    res.render('index', { reactOutput: reactHtml }); 
}); 

module.exports = router; 

组件:

/** @jsx React.DOM */ 

var React = require('react/addons'); 

/* create factory with griddle component */ 
var Griddle = React.createFactory(require('griddle-react')); 

var fakeData = require('../data/fakeData.js').fakeData; 
var columnMeta = require('../data/columnMeta.js').columnMeta; 
var resultsPerPage = 200; 

var ReactApp = React.createClass({ 

    componentDidMount: function() { 
    console.log(fakeData); 

    }, 
    render: function() { 
    return (
     <div id="table-area"> 

     <Griddle results={fakeData} 
       columnMetadata={columnMeta} 
       resultsPerPage={resultsPerPage} 
       tableClassName="table"/> 

     </div> 
    ) 
    } 
}); 

/* Module.exports instead of normal dom mounting */ 
module.exports = ReactApp; 

而且我一饮而尽任务抛出一个警告说警告:组件(...):在返回的部件上找不到render方法立场:你可能已经忘记在你的组件中定义render,或者你可能意外地尝试渲染一个元素,该元素的类型是一个不是React组件的函数。 警告:请勿设置React元素的道具属性。相反,在最初创建元素时指定正确的值。

任何人都可以帮我吗?非常感谢

回答

5

通过添加围绕griddle-react一个react.createFactory()电话,表示您要使用普通的JavaScript,而不是JSX。因此,你需要使用的干锅JavaScript函数在随后的渲染功能:

return Griddle({results: fakeData, 
       columnMetadata: columnMeta, 
       resultsPerPage: resultsPerPage, 
       tableClassName: "table"}); 

如果你想使用你已经拥有的JSX语法,只要求griddle-react没有React.createFactory()电话。