如何将渲染函数中的Jsx分离到ES6中的单独文件中？或任何其他解决方案,以分离逻辑和演示？

Question

这是ES5中的代码,其中jsx被写入单独的文件中

import React from 'react';
import Template from './template.jsx';

const DetailElement = React.createClass({
  render: Template
});

export default DetailElement;
enter code here

template.jsx文件将是这样的

import React from 'react';

const render = function() {

    return (
      <div>Hello World</div>
    );
};

export default render;

如何使用ES6类编写相同的内容？或者可以使用任何其他解决方案进行此分离？

我有这样的ES6代码

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

export default DetailElement extends Component {
   componentDidMount() {
    // some code
  }
};
DetailElement.prototype.render = Template;

是的,这是有效的.

Answer 1

是的,你可以这样做你的模板代码就像一个功能组件,基本上它是一个返回jsx的函数.您只需要在DetailElement类中渲染模板

import React from 'react';
import Template from './template.jsx';

class DetailElement extends React.Component{
  render = Template
};

export default DetailElement;

这里是我创建的一个示例codepen链接 现在是一个es6类功能,你可以在class或babel变换器之外定义你需要检查的类属性