React.js:如何将jsx从JavaScript中分离出来?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (269)

有没有办法将jsx从组件的渲染函数移动到单独的文件中?如果是这样,我如何在渲染函数中引用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>
  );

};

目前的最佳做法是使用.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>
  );
};
用户回答回答于

你可以使用react-templates。它给你准确的标记和组件本身之间的分离,等等。

我发现它非常适合我的需求(一个大型的网络应用程序)。

扫码关注云+社区

领取腾讯云代金券