React.js：如何将jsx从JavaScript中解耦

有没有办法将jsx从组件的render函数移动到一个单独的文件？如果是这样，我如何在render函数中引用jsx？

这里有一个模式用于分离在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>
  );
};

React.js：如何将jsx从JavaScript中解耦

相关文章