React.js:如何将 jsx 与 JavaScript 解耦 [英] React.js: how to decouple jsx out of JavaScript

问题描述

有什么方法可以将 jsx 从组件的渲染函数移动到单独的文件中吗?如果是这样，如何在render函数中引用jsx?

解决方案

这里是一个分离模板 jsx 的模式，它在 NodeJS、Browserify 或 Webpack 中使用 CommonJS 模块.在 NodeJS 中，我发现 node-jsx 模块有助于避免编译 JSX.

//index.jsrequire('node-jsx').install({extension: '.jsx'});var React = require('react'),Component = require('./your-component');//你的组件.jsxvar 你的组件，React = require('react'),template = require('./templates/your-component.jsx');module.exports = YourComponent = React.createClass({渲染:函数(){返回 template.call(this);}});//模板/你的组件.jsx/** @jsx React.DOM */var React = require('react');module.exports = function() {返回 (<div>您的模板内容.

);};

更新 2015-1-30:在 Damon Smith 的回答中加入了将模板函数中的 this 设置为 React 组件的建议.

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

//index.jsvar React = require('react'),ReactDOM = require('react-dom'),YourComponent = require('./your-component');ReactDOM.render(React.createElement(YourComponent, {}, null),document.getElementById('root'));//你的组件.jsvar React = require('react'),YourComponentTemplate = require('./templates/your-component');var YourComponentContainer = React.createClass({getInitialState: 函数() {返回 {颜色:'绿色'};},切换颜色:函数(){this.setState({颜色:this.state.color === '绿色' ?'蓝绿色'});},渲染:函数(){var componentProps = {颜色:this.state.color，onClick: this.toggleColor};返回 <YourComponentTemplate {...componentProps}/>;}});module.exports = YourComponentContainer;//模板/你的组件.jsvar React = require('react');module.exports = function YourComponentTemplate(props) {返回 (<div style={{color: props.color}} onClick={props.onClick}>您的模板内容.

);};

Is there any way to move the jsx from a component's render function to a separate file? If so, how do I reference the jsx in the render function?

解决方案

Here is a pattern for separating the template jsx that uses CommonJS modules in NodeJS, Browserify or Webpack. In NodeJS, I found the node-jsx module helpful to avoid the need to compile the 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>
  );

};

Update 2015-1-30: incorporated suggestion in Damon Smith's answer to set this in the template function to the React component.

Update 12/2016: the current best practice is to use the .js extension and use a build tool like Babel to output the final javascript from your source. Take a look at create-react-app if you're just getting started. Also, the latest React best practices do recommend a separation between components that manage state (typically called "container components") and components that are presentational. These presentational components can now be written as functions, so they are not far off from the template function used in the previous example. Here is how I would recommend decoupling most of the presentational JSX code now. These examples still use the 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 解耦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！