React.js:如何将jsx解耦出JavaScript

Question

有没有办法将jsx从组件的渲染功能移动到单独的文件？如果是这样,我如何在渲染函数中引用jsx？

Answer 1

您可以使用react-templates.它为您提供了标记和组件本身之间的这种分离,以及更多.

我发现它对我的需求非常有用(大型网络应用程序).

Answer 2

将模板移动到单独文件中的一个问题是,如果您使用以下处理程序:

var myTemplate = (
    <form onSubmit={this.handleSubmit}></form>
);

然后在您使用的组件中:

render: function() {
    return myTemplate;
}

生成的模板代码将调用this.handleSubmit(),因此"this"将出错并且处理程序将无法工作.你需要做的是将它们放在一个函数中,如下所示:

var myTemplate = function() {
    return (
        <form onSubmit={this.handleSubmit}></form>
    );
};

然后在组件的渲染功能中,你需要正确地将它绑定到'this',然后调用它,如下所示:

render: function() {
    return myTemplate.bind(this)();
},

现在,您可以将该模板定义放在任何位置,放在单独的文件中,或者您希望构建和引用自己的代码.(给你力量!不要听这些疯狂的规范框架!:))

Answer 3

这是一个用于分隔在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的答案中纳入建议,this将模板函数设置为React组件.

更新12/2016:目前的最佳做法是使用.js扩展名并使用像Babel这样的构建工具从源代码输出最终的javascript.如果您刚刚开始,请查看create-react-app.此外,最新的React最佳实践确实建议在管理状态的组件(通常称为"容器组件")和表示组件之间进行分离.这些表示组件现在可以写为函数,因此它们与前一个示例中使用的模板函数相差不远.以下是我建议现在解耦大多数表示JSX代码的方法.这些示例仍使用ES5 React.createClass()语法.

// 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>
  );
};

Answer 4

我只是将JSX分成匿名函数文件

template.js

export default (component) => {
return <h1>Hello {component.props.name}</h1>
}

我-component.js

import React, {Component} from 'react';
import template from './template';

export default MyComponent extends Component {
   render() {
     return template(this);
   }
}

在模板中,您可以使用component变量访问道具或状态或函数.