Javascript 如何在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;

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

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

---

是的，这是可行的。

使用类似无状态函数的方法来定义组件的

JSX

consthtml=（props）=>你好{props.name}！
类扩展了React.Component{
render（）{
返回
}
}
ReactDOM.render（，document.getElementById（'app'））

---

以下是ES6的反应方式

import * as React from 'react'
class SomeComponent extends React.Component{
  constructor(props){
    super(props);
  }

  render(){

    return (<div className="some class name">
                Hello World
            </div>
          )
  }
}

export default SomeComponent;


//import will look like

import SomeComponent from "./SomeComponent";

import*作为来自“React”的React
类SomeComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
你好，世界
)
}
}
导出默认组件；
//导入将看起来像
从“/SomeComponent”导入SomeComponent；

细节元素将是这样的

import * as React from 'react'
import SomeComponent from "./SomeComponent";

class DetailElement extends React.Component{
  constructor(props){
    super(props);
  }

  render(){

    return (<div className="some classes">
               <SomeComponent/> 
            </div>
          )
  }
}

export default DetailElement;

export const somefun = (parameter1)=> {
  return (<div>{parameter1} </div> )
}

import*作为来自“React”的React
从“/SomeComponent”导入SomeComponent；
类DetailElement扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
)
}
}
导出默认细节元素；

不确定es6类，但您可以在react组件之外编写类似这样的函数

import * as React from 'react'
import SomeComponent from "./SomeComponent";

class DetailElement extends React.Component{
  constructor(props){
    super(props);
  }

  render(){

    return (<div className="some classes">
               <SomeComponent/> 
            </div>
          )
  }
}

export default DetailElement;

export const somefun = (parameter1)=> {
  return (<div>{parameter1} </div> )
}

export const somefun=（参数1）=>{
返回（{parameter1}）
}

然后调用render方法中的函数

render(){

    return (<div className="some class name">
                {somefun()}
            </div>
          )
   }

render（）{
返回(
{somefun（）}
)
}

您必须从“react”导入组件并将其扩展到类

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

export class  DetailElement extends Component{

  render(){ 
       return(
         <Template></Template>
          );
}
}

import React，{Component}来自'React'；
从“/Template.jsx”导入模板；
导出类DetailElement扩展组件{
render（）{
返回(
);
}
}

是的，您可以这样做您的模板代码就像一个函数组件，基本上它是一个返回jsx的函数。您只需要在DetailElement类中呈现模板

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

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

export default DetailElement;

下面是我创建的一个示例

---

现在是一个es6类特性，您可以在需要检查的类或babel transformer之外定义类属性，我不需要使用

react模板。我只需要将jsx部分分离到一个单独的文件中，
react template
就是这样做的。
jsx
是react中的HTML<代码>反应模板

将HTML从反应组件中删除是的，反应模板有自己的语法。我不喜欢那样。但它也将支持Es6。。让我试试，谢谢你的回答。但是你的解决方案不会有帮助，因为我们需要将一组新的道具传递给组件，它将成为一个单独的组件。逻辑需要设置很多道具和陈述，我没有受到质疑。是否要将ES 5代码转换为ES 6？或者你想把你的ES6代码转换成ES5代码？我只想把上面的代码转换成ES6felix kling，我已经更新了这个问题。我想知道做这件事的其他解决方案，比如使用react模板，问题更具体到ReactJS，没有具体的反应。ES6类是ES6类，您可以

扩展组件，也可以不扩展组件。就我个人而言，我建议无论如何不要这样做。把逻辑放在一起。@FelixKling我有很多布局，但逻辑是一样的，所以我想把逻辑分开。请注意，这不是一个重复的问题，因为它将有助于获得一个解决方案来分离react中的逻辑和表示！我需要在一个单独的文件中编写渲染函数，并将其导入ES6类文件。我需要确切地知道如何在component类中使用External render函数来渲染组件
render:Template
它将不起作用！但是
render=Template将起作用