这里有一个模式用于分离在NodeJS,Browserify或Webpack中使用CommonJS模块的模板jsx。在NodeJS中,我发现node-jsx模块有助于避免编译JSX的需要。
// index.js require('node-jsx').install({extension: '.jsx'}); var React = require('react'),Component = require('./your-component'); // your-component.jsx var YourComponent,React = require('react'),template = require('./templates/your-component.jsx'); module.exports = YourComponent = React.createClass({ render: function() { return template.call(this); } }); // templates/your-component.jsx /** @jsx React.DOM */ var React = require('react'); module.exports = function() { return ( <div> Your template content. </div> ); };
更新2015-1-30:在Damon Smith的答案中纳入建议,在模板函数中将此设置为React组件。
更新12/2016:当前最佳实践是使用.js扩展,并使用构建工具(如Babel)从源代码输出最终的JavaScript。看看create-react-app如果你刚刚开始。此外,最新的React最佳实践建议在管理状态的组件(通常称为“容器组件”)和呈现性组件之间进行分隔。这些表现组件现在可以写为函数,因此它们不会远离前一个示例中使用的模板函数。这里是我如何建议解耦大多数的现代JSX代码现在。这些例子仍然使用ES5 React.createClass()
syntax。
// index.js var React = require('react'),ReactDOM = require('react-dom'),YourComponent = require('./your-component'); ReactDOM.render( React.createElement(YourComponent,{},null),document.getElementById('root') ); // your-component.js var React = require('react'),YourComponentTemplate = require('./templates/your-component'); var YourComponentContainer = React.createClass({ getInitialState: function() { return { color: 'green' }; },toggleColor: function() { this.setState({ color: this.state.color === 'green' ? 'blue' : 'green' }); },render: function() { var componentProps = { color: this.state.color,onClick: this.toggleColor }; return <YourComponentTemplate {...componentProps} />; } }); module.exports = YourComponentContainer; // templates/your-component.js var React = require('react'); module.exports = function YourComponentTemplate(props) { return ( <div style={{color: props.color}} onClick={props.onClick}> Your template content. </div> ); };