Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/node.js/36.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Node.js React:Can';t添加属性上下文,对象不可扩展_Javascript_Node.js_Express_Reactjs_Isomorphic Javascript - Fatal编程技术网

Javascript Node.js React:Can';t添加属性上下文,对象不可扩展

Javascript Node.js React:Can';t添加属性上下文,对象不可扩展,javascript,node.js,express,reactjs,isomorphic-javascript,Javascript,Node.js,Express,Reactjs,Isomorphic Javascript,我目前正在尝试在node.js+express构建中实现一个同构的react组件。然而,当我试图将上述组件包含到我的jade模板中以呈现它时,我得到了以下错误:TypeError:无法添加属性上下文,对象不可扩展 这是我的路由文件: var express = require('express'); var router = express.Router(); var React = require('react/addons'), ReactApp = React.createFact

我目前正在尝试在node.js+express构建中实现一个同构的react组件。然而,当我试图将上述组件包含到我的jade模板中以呈现它时,我得到了以下错误:TypeError:无法添加属性上下文,对象不可扩展

这是我的路由文件:

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;
/**@jsx React.DOM*/
var React=require('React/addons');
/*使用griddle组件创建工厂*/
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:函数(){
控制台日志(伪造数据);
},
渲染:函数(){
返回(
)
}
});
/*Module.exports而不是普通的dom装载*/
module.exports=ReactApp;
另外,我的gulp任务会抛出一条警告,说warning:Component(…):在返回的组件实例上找不到
render
方法:您可能忘记了在组件中定义
render
,或者您可能无意中尝试呈现类型为非组件的函数的元素。 警告:不要设置React元素的props属性。而是在最初创建元素时指定正确的值。


有人能帮我吗?非常感谢

通过添加一个
react.createFactory()
调用
gridle react
,表示您将使用纯JavaScript而不是JSX。因此,您需要在后续的渲染函数中为Griddle使用JavaScript函数:

return Griddle({results: fakeData,
                columnMetadata: columnMeta,
                resultsPerPage: resultsPerPage,
                tableClassName: "table"});
如果您想使用已有的JSX语法,只需在不调用
react.createFactory()的情况下要求
griddle react