blocks|key|171066|text|下面是在NodeJS、Browserify或Webpack中使用CommonJS模块的模板jsx的分离模式。在NodeJS中，我发现node-jsx模块有助于避免编译JSX。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|171067|//+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>
++);

};|code-block|syntax|javascript|171068|更新2015-1-30:在Damon+Smith的答案中加入了将模板函数中的this设置为React组件的建议。|offset|length|style|CODE|171069|2016年12月更新:当前的最佳实践是使用.js扩展，并使用像Babel这样的构建工具来从您的源代码输出最终的javascript。如果您刚刚开始，请查看create-react-app。此外，最新的React最佳实践建议将管理状态的组件(通常称为“容器组件”)和表象组件分开。这些表示组件现在可以编写为函数，因此它们与上一个示例中使用的模板函数相差不远。下面是我现在推荐的解耦大多数表征性JSX代码的方法。这些示例仍然使用ES5+React.createClass()+syntax。|171070|//+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>
++);
};|171071|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/facebookincubator/create-react-app|1|https://facebook.github.io/react/docs/react-without-es6.html^0|0|0|12|4|0|60|J|25|G|0|5W|U|1|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@$I|13|J|14|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@$I|16|J|17|K|L]]|9|@$I|18|J|19|1|1A]|$I|1B|J|1C|1|1D]]|A|$]]|$1|O|3|P|5|D|7|1E|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

<p>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.</p>

<pre><code>// 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 (
    &lt;div&gt;
      Your template content.
    &lt;/div&gt;
  );

};
</code></pre>

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

<p>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 <a href="https://github.com/facebookincubator/create-react-app" rel="noreferrer">create-react-app</a> 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 <a href="https://facebook.github.io/react/docs/react-without-es6.html" rel="noreferrer">ES5 <code>React.createClass()</code> syntax</a>.</p>

<pre><code>// 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 &lt;YourComponentTemplate {...componentProps} /&gt;;
  }
});

module.exports = YourComponentContainer;

// templates/your-component.js
var React = require('react');

module.exports = function YourComponentTemplate(props) {
  return (
    &lt;div style={{color: props.color}} onClick={props.onClick}&gt;
      Your template content.
    &lt;/div&gt;
  );
};
</code></pre>


blocks|key|171122|text|将模板移动到单独的文件中的一个问题是，如果使用如下处理程序：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|171123|var+myTemplate+=+(
++++<form+onSubmit={this.handleSubmit}></form>
);|code-block|syntax|javascript|171124|然后在您的组件中使用：|171125|render:+function()+{
++++return+myTemplate;
}|171126|生成的模板代码将调用this.handleSubmit()，因此"this“将是错误的，处理程序将无法工作。您需要做的是将它们放入一个函数中，如下所示：|171127|var+myTemplate+=+function()+{
++++return+(
++++++++<form+onSubmit={this.handleSubmit}></form>
++++);
};|171128|然后在你的组件的渲染函数中，你需要正确地将它绑定到'this‘，然后调用它，如下所示：|171129|render:+function()+{
++++return+myTemplate.bind(this)();
},|171130|现在，您可以将该模板定义放在任何地方，放在单独的文件中，或者以您想要的方式构造和引用您自己的代码。(给你权力！不要听信这些疯狂的规范框架！:)|171131|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

<p>One problem with moving templates into a separate file is that if you use handlers like: </p>

<pre><code>var myTemplate = (
    &lt;form onSubmit={this.handleSubmit}&gt;&lt;/form&gt;
);
</code></pre>

<p>and then in your component you use:</p>

<pre><code>render: function() {
    return myTemplate;
}
</code></pre>

<p>the generated template code will call this.handleSubmit(), so the "this" will be wrong and the handlers won't work. What you need to do is put them in a function, like this:</p>

<pre><code>var myTemplate = function() {
    return (
        &lt;form onSubmit={this.handleSubmit}&gt;&lt;/form&gt;
    );
};
</code></pre>

<p>then in your component's render function, you need to bind it to 'this' correctly, then call it, like this:</p>

<pre><code>render: function() {
    return myTemplate.bind(this)();
},
</code></pre>

<p>Now you can put that template definition anywhere, in a separate file or however you want to structure and reference your own code. (power to you! Don't listen to these crazy prescriptive frameworks! :) )</p>


blocks|key|4677062|text|您可以使用react-templates。它恰好为您提供了标记和组件本身之间的这种分离，等等。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4677063|我发现它非常适合我的需求(一个大型web应用程序)。|4677064|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/wix/react-templates^0|5|F|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<p>You can use <a href="https://github.com/wix/react-templates">react-templates</a>. It gives you exactly this separation between the markup and the component itself, and much more.</p>

<p>I found it very useful for my needs (a large scale web app).</p>


<p>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?</p>


React.js: how to decouple jsx out of JavaScript

容器

有没有办法将jsx从组件的呈现函数转移到单独的文件中？如果是这样，我如何在呈现函数中引用jsx？

问React.js:如何从JavaScript中解耦
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React.js:如何从JavaScript中解耦EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React.js:如何从JavaScript中解耦
EN