React.js:如何从JavaScript中解耦
有没有办法将jsx从组件的呈现函数转移到单独的文件中？如果是这样，我如何在呈现函数中引用jsx？
回答 3
Stack Overflow用户
发布于 2014-11-22 07:11:32
下面是在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组件的建议。
2016年12月更新:当前的最佳实践是使用.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>
);
};Stack Overflow用户
发布于 2015-01-28 05:20:59
您可以使用react-templates。它恰好为您提供了标记和组件本身之间的这种分离，等等。
我发现它非常适合我的需求(一个大型web应用程序)。
Stack Overflow用户
发布于 2014-12-11 03:43:53
将模板移动到单独的文件中的一个问题是，如果使用如下处理程序：
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)();
},现在，您可以将该模板定义放在任何地方，放在单独的文件中，或者以您想要的方式构造和引用您自己的代码。(给你权力！不要听信这些疯狂的规范框架！:)
https://stackoverflow.com/questions/21066581
复制相似问题