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 {
ponentDidMount() {
// some code
}
};
DetailElement.prototype.render = Template;
Yes this is working.
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 {
ponentDidMount() {
// some code
}
};
DetailElement.prototype.render = Template;
Yes this is working.
Share Improve this question edited Nov 15, 2016 at 8:43 mshameer asked Nov 15, 2016 at 6:43 mshameermshameer 4,1412 gold badges17 silver badges15 bronze badges 6- I am not getting question. Do you want to convert your ES 5 code to ES 6? Or do you want to render your ES 6 code into ES 5 code? – Dhaval Soni Commented Nov 15, 2016 at 6:54
- I just want to convert the above code into ES6 – mshameer Commented Nov 15, 2016 at 6:56
- felix-kling I have updated the question. I want to know any other solution for doing this like using react-template and the question is more specific to reactjs – mshameer Commented Nov 15, 2016 at 7:28
-
There is nothing specific to React. An ES6 class is an ES6 class, where you
extend Componentor not. Personally I'd remend to simply not do it anyway. Keep the logic together. – Felix Kling Commented Nov 15, 2016 at 7:58 - @FelixKling I have many layouts but the logic is same so I want to keep the logic separate. Please note that this is not a duplicate question since It will be helpful to get a solution to separate the logic and presentation in react! – mshameer Commented Nov 15, 2016 at 8:10
4 Answers
Reset to default 10Yes you can do it your template code is like a functional oponent 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 ponent.
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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./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 ponent 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>
)
}