I'm trying to use React and Node to create an application. However, I'm having trouble creating a component using other components and then rendering that "master" component. In a Components.js file, I have multiple components defined, like:
/** @jsx React.DOM */
var React = require('react');
var ReactDOM = require('react-dom');
var Component = require('../components/Component');
class Comp1 extends React.Component {
render() {
return (
<div>
some stuff here
</div>
)
}
};
...
module.exports = Master = React.createClass({
render: function() {
return (
<div>
<Comp1 />
<Comp2 />
</div>
)
}
});
Then, in my routes.js, I have:
var JSX = require('node-jsx').install();
var React = require('react');
var ReactDOM = require('react-dom/server');
var Component = require('./components/Component');
module.exports = {
index: function(req, res) {
var markup =
ReactDOM.renderToString(React.createElement(Component));
res.render('home', {
markup: markup
});
}
};
And in my app.js, I have:
/** @jsx React.DOM */
var React = require('react');
var Component = require('./components/Component');
ReactDOM.render(
<Component />,
document.getElementById('root')
);
I think I'm incorrectly nesting the components inside Master and then incorrectly exporting Master, because I receive the error message "TypeError: Class constructor Comp1 cannot be invoked without 'new'". I'm not quite sure what to do; any help would be appreciated, thanks!
via gridproquo
No comments:
Post a Comment