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?
Question
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.
4 answers
solution1
9 ACCPTED 2016-11-15 07:41:36
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
solution2
1 2016-11-15 06:52:21
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>
solution3
0 2016-11-15 06:59:35
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>
)
}
solution4
0 2016-11-15 07:03:28
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>
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.