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?

Here is the code in ES5 in which the jsx is written into a separate file

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

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

export default DetailElement;
enter code here

template.jsx file will be like this

import React from 'react';

const render = function() {

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

export default render;

How can I write the same using ES6 Classes ? Or any other solution is available to do this separation ?

I have got the ES6 code something like this

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

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

Yes this is working.

Yes you can do it your template code is like a functional comoponent basically it is a function that returns jsx. You just need to render your template in your DetailElement class

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

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

export default DetailElement;

here is an example I created codepen link now is a es6 class feature that you can define class property outside class or babel transformer that you need to check

Use something like stateless function to define the JSX out of your component.

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>

You have to import Component from 'react' and extend it to class.

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

export class  DetailElement extends Component{

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

here is how the ES6 React looks like

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

Detail Element will be something like this

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;

Not Sure about es6 classes but you can write a function outside react component something like this

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

then call function in render method

render(){

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

来源：https://stackoverflow.com/questions/40603632/how-to-separate-jsx-inside-render-function-into-a-separate-file-in-es6-or-any-o

标签

javascript

reactjs

ecmascript-6

react-jsx