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

这是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;

是的，这是有效的。

是的，你可以做到，你的模板代码就像一个功能组件，基本上它是一个返回 jsx 的函数。您只需在“详细信息元素”类中渲染模板即可

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

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

export default DetailElement;

这是我创建的一个例子代码笔链接 https://codepen.io/anuprai11894/pen/eBzrqV现在是一个 es6 类功能，您可以在需要检查的类或 babel 转换器之外定义类属性