如何在ES6中将Jsx内部呈现函数分离为单独的文件？或任何其他的解决方案，以反应分开的逻辑和表示？
如何在ES6中将Jsx内部呈现函数分离为单独的文件？或任何其他的解决方案，以反应分开的逻辑和表示？
提问于 2016-11-15 06:43:55
以下是ES5中的代码，其中jsx被写入一个单独的文件中
import React from 'react';
import Template from './template.jsx';
const DetailElement = React.createClass({
render: Template
});
export default DetailElement;
enter code heretemplate.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;是的，这很管用。
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-11-15 07:41:36
是的，您可以这样做，您的模板代码就像一个函数共形，基本上它是一个返回jsx的函数。只需在DetailElement类中呈现模板即可。
import React from 'react';
import Template from './template.jsx';
class DetailElement extends React.Component{
render = Template
};
export default DetailElement;下面是我创建的一个示例，代码链接现在是一个es6类特性，您可以在类之外定义类属性，或者需要检查的babel转换器。
Stack Overflow用户
发布于 2016-11-15 06:52:21
使用类似于无状态函数的方法从组件中定义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>
Stack Overflow用户
发布于 2016-11-15 06:59:35
下面是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 * 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类，但可以在外部编写一个函数，如下所示
export const somefun = (parameter1)=> {
return (<div>{parameter1} </div> )
}然后在呈现方法中调用函数
render(){
return (<div className="some class name">
{somefun()}
</div>
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40603632
复制相关文章
相似问题
腾讯云开发者
