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

前端之家收集整理的这篇文章主要介绍了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>
  );
};
原文链接:https://www.f2er.com/react/302657.html

猜你在找的React相关文章