如何在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?

本文关键字：分离 文件 一个 单独 任何 其他 逻辑和 表示 解决方案 Jsx ES6      更新时间：2023-09-26

以下是ES5中的代码，其中jsx被写入一个单独的文件

import React from 'react';
import Template from './template.jsx';
const DetailElement = React.createClass({
  render: Template
});
export default DetailElement;
enter code here

模板。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;

是的，你可以这样做，你的模板代码就像一个功能组件，基本上它是一个返回jsx的函数。你只需要在DetailElement类

中呈现你的模板
import React from 'react';
import Template from './template.jsx';
class DetailElement extends React.Component{
  render = Template
};
export default DetailElement;

这里是一个例子，我创建了一个相互依赖的链接现在是一个es6的类特性，你可以在类或Babel transformer之外定义类属性，你需要检查

使用类似无状态函数的东西来定义组件的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>

你必须从'react'中导入Component并将其扩展到class中。

import React, { Component } from 'react';
import Template from './template.jsx';
export class  DetailElement extends Component{
  render(){ 
       return(
         <Template></Template>
          );
}
}

下面是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";

Detail元素应该是这样的

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(){
    return (<div className="some class name">
                {somefun()}
            </div>
          )
   }
相关文章：