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

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。

const HTML = (props) => <div> Hello {props.name}!</div>


class A extends React.Component{
  render() {
    return <HTML name="Joe"/>
  }
}

ReactDOM.render(<A/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

这是 ES6 React 的样子

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 * 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;

不确定 es6 类但是你可以在 React 组件之外写一个函数，像这样

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

然后在render方法中调用函数

render(){

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

Answer 3

您必须从 'react' 导入组件并将其扩展到 class。

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

export class  DetailElement extends Component{

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

Answer 4

是的，你可以做到，你的模板代码就像一个功能组件，基本上它是 returns jsx 的一个功能。您只需要在 DetailElement class

中呈现您的模板

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

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

export default DetailElement;

这是我创建的示例 codepen link 现在是一个 es6 class 特性，你可以在 class 之外定义 class 属性或者你需要检查的 babel 转换器

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

How to Separate Jsx inside render function into a separate file in ES6? or any other solution in react to separate the Logic and presentation?

javascript

ecmascript-6

reactjs

react-jsx