Node.js React：无法添加属性上下文，对象不可扩展答案

【问题标题】：Node.js React: Can't add property context, object is not extensibleNode.js React：无法添加属性上下文，对象不可扩展
【发布时间】：2015-09-21 16:17:23
【问题描述】：

我目前正在尝试在我的 node.js + express 构建中实现同构反应组件。但是，当我尝试将上述组件包含到我的翡翠模板中进行渲染时，我收到此错误：TypeError: Can't add property 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 任务也抛出一个警告说 Warning: Component(...): No render method found on the returned component instance: 你可能忘记在你的组件中定义 render 或者你可能不小心尝试渲染一个元素，其类型是一个不是 React 组件的函数。警告：不要设置 React 元素的 props 属性。相反，在最初创建元素时指定正确的值。

谁能帮帮我？非常感谢

【问题讨论】：

标签： javascript node.js express reactjs isomorphic-javascript

【解决方案1】：

通过在griddle-react 周围添加react.createFactory() 调用，表示您将使用纯JavaScript 而不是JSX。因此，您需要在后续的渲染函数中为 Griddle 使用 JavaScript 函数：

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

如果您想使用已有的 JSX 语法，只需要求 griddle-react 而无需调用 React.createFactory()。

【讨论】：