Incluir contenido HTML sin agregarlo en clases REACT

publicado por: Anonymous

Tengo una duda un tanto simple, tal vez otros la han tenido antes. Estoy empezando con react y, como bien sabemos, lo principal es cambiar segmentos de contenido por medio de los componentes. Ahora, tengo una duda puntual. Si al actualizar un segmento, quisiera incluir HTML directo (sin necesidad de crearlo en el metodo render del archivo jsx, sino un archivo html) Ya que no requiero cierta lógica con tal HTML ¿puedo hacerlo?

Puntualmente, estoy trabajando con una app, en la que tengo dos segmentos y ambos los actualizo : “main” y “footer”. Pero hay secciones, en las que por ejemplo, quiero o necesito incluir texto en html, imagenes u otros elementos que son estaticos y realmente no necesito verificarles nada, por lo que me parece que lleno los archivos jsx con código innecesario, pero no sé, como podria agregarlos si precisamente forman parte de un componente que se actualiza.

Gracias.

solución

Lo que puedes hacer es lo que se le conoce como un Stateless Component
que sirve para mostrar HTML o Components que son hijos de otros Components con Estado y se crean así:

EDITADO
Olvidé agregar import React from “react”

//Header.js

import React from 'react'

const Header = () => 
<header>
Soy Header
</header>

export default Header

si vas a agregar props y lógica a tu componente entonces

//Footer.js
import React from 'react'

const Footer = (props) => {
 if (!props.year) {
  return ( <footer>MiApp todos los derechos reservados 2017</footer>)
 } else {
  return (<footer>{`MiApp todos los derechos reservados ${props.year}`}</footer>
 }
}

export default Footer

Y al final los utilizas como cualquier componente de React

//MiApp

import React, {Component} from 'react'
import Header from './components/Header'
import Footer from './components/Footer'
import {render} from 'react-dom'

class MiApp extends Component {
 render() {
  return (
   <Header/>
    <h1> La mejor App del mundo </h1>
   <Footer year="2017"/>
  )
 }
}

render(<MiApp/>; document.querySelector('#app');
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *