2015-07-03 2 views
3

В настоящее время я пытаюсь реализовать изоморфный компонент реакции в моей node.js + express build. Однако, когда я пытаюсь включить указанный компонент в шаблон нефрита, чтобы сделать это, я получаю эту ошибку: TypeError: Невозможно добавить контекст свойства, объект не является расширяемымNode.js React: не удается добавить контекст свойства, объект не расширяется

Вот файл моих маршрутов:

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 метода найденного на возвращаемую компоненте stance: вы, возможно, забыли определить render в своем компоненте, или вы, возможно, случайно попытались отобразить элемент, тип которого является функцией, которая не является компонентом React. Предупреждение. Не устанавливайте свойство реквизита элемента React. Вместо этого укажите правильное значение при первоначальном создании элемента.

Может ли кто-нибудь мне помочь? Большое спасибо

ответ

5

Добавив react.createFactory() звонок около griddle-react, вы означаете, что вы собираетесь использовать простой JavaScript вместо JSX. Таким образом, вам нужно использовать функцию JavaScript для Griddle в последующей функции визуализации:

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

Если вы хотели бы использовать синтаксис JSX, что у вас уже есть, просто требует griddle-react без React.createFactory() вызова.