Как отделить JSx внутри функции рендеринга в отдельный файл в ES6? или любое другое решение, реагирующее на разделение логики и презентации?

Вот код в ES5, в котором JSX записывается в отдельный файлКак отделить JSx внутри функции рендеринга в отдельный файл в ES6? или любое другое решение, реагирующее на разделение логики и презентации?

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

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

export default DetailElement; 
enter code here

template.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;

Да это работает.

источник

2016-11-15 mshameer

У меня нет вопросов. Вы хотите преобразовать свой код ES 5 в ES 6? Или вы хотите сделать код ES 6 кодом ES 5? –

Я просто хочу преобразовать вышеуказанный код в ES6 – mshameer

felix-kling Я обновил вопрос. Я хочу знать любое другое решение для этого, например, используя шаблон реакции, и вопрос более специфичен для реакции. – mshameer

Да, вы можете сделать это ваш код шаблона, как функциональный comoponent в основном это функция, которая возвращает JSX. Вам просто нужно сделать шаблон в вашем DetailElement классе

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

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

export default DetailElement;

вот пример, который я создал codepen link теперь класс ES6 функция, которую можно определить класс свойства вне класса или Бабель трансформатор, который вам нужно проверить

источник

2016-11-15 07:41:36 Anup

'render: Template' Это не сработает! но 'render = Template;' будет работать – mshameer

oh ya my bad, но его писать в кодефене – Anup

Используйте что-то вроде функции без гражданства, чтобы определить 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>

источник

2016-11-15 06:52:21

Мне не нужно использовать 'response-template'. Мне просто нужно отделить часть jsx от отдельного файла – mshameer

Это что 'response-template' делает. –

' JSX' - это HTML внутри React. 'response-templates' выводит HTML из вашего реагирующего компонента –

вот как 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";

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 но вы можете написать функцию вне реагирующего компонента somethi нг, как этот

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

затем вызвать функцию в визуализации метод

render(){ 

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

источник

2016-11-15 06:59:35 abhirathore2006

Мне нужно написать функцию рендеринга в отдельном файле и импортировать ее в файл класса ES6. Мне нужно точно знать, как использовать внешнюю функцию рендеринга внутри класса компонента для визуализации компонента. – mshameer

Вы должны импортировать компонент из «реагировать» и распространить его в класс.

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

export class DetailElement extends Component{ 

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

источник

2016-11-15 07:03:28

Как отделить JSx внутри функции рендеринга в отдельный файл в ES6? или любое другое решение, реагирующее на разделение логики и презентации?

ответ

Смежные вопросы