Node.js React:无法添加 属性 上下文,对象不可扩展
Node.js React: Can't add property context, object is not extensible
我目前正在尝试在我的 node.js + 快速构建中实现同构 React 组件。但是,当我尝试将上述组件包含到我的 jade 模板中进行渲染时,我收到此错误:TypeError: Can't add 属性 context, object is not extensible
这是我的路线文件:
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;
我的 gulp 任务也抛出警告说 警告:组件(...):在返回的组件实例上找不到 render
方法:您可能忘记了在您的组件中定义 render
,否则您可能不小心尝试渲染一个类型为非 React 组件的函数的元素。
警告:不要设置 React 元素的属性 属性。相反,在最初创建元素时指定正确的值。
谁能帮帮我?非常感谢
通过在 griddle-react
周围添加 react.createFactory()
调用,您表示您将使用纯 JavaScript 而不是 JSX。因此,需要在后续的render函数中为Griddle使用一个JavaScript函数:
return Griddle({results: fakeData,
columnMetadata: columnMeta,
resultsPerPage: resultsPerPage,
tableClassName: "table"});
如果您想使用已有的 JSX 语法,只需要 griddle-react
而无需 React.createFactory()
调用。
我目前正在尝试在我的 node.js + 快速构建中实现同构 React 组件。但是,当我尝试将上述组件包含到我的 jade 模板中进行渲染时,我收到此错误:TypeError: Can't add 属性 context, object is not extensible
这是我的路线文件:
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;
我的 gulp 任务也抛出警告说 警告:组件(...):在返回的组件实例上找不到 render
方法:您可能忘记了在您的组件中定义 render
,否则您可能不小心尝试渲染一个类型为非 React 组件的函数的元素。
警告:不要设置 React 元素的属性 属性。相反,在最初创建元素时指定正确的值。
谁能帮帮我?非常感谢
通过在 griddle-react
周围添加 react.createFactory()
调用,您表示您将使用纯 JavaScript 而不是 JSX。因此,需要在后续的render函数中为Griddle使用一个JavaScript函数:
return Griddle({results: fakeData,
columnMetadata: columnMeta,
resultsPerPage: resultsPerPage,
tableClassName: "table"});
如果您想使用已有的 JSX 语法,只需要 griddle-react
而无需 React.createFactory()
调用。