5

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.

3
  • 1
    Lo mejor es incluir todo lo posible dentro del estado para aprovechar el paradigma reactivo de React así, si cambia el HTML por alguna razón, éste se ve reflejado automáticamente al re-renderizarse el componente. Aún así si quieres hacer eso lo puedes hacer con jQuery#load o simple JavaScript.
    – gugadev
    el 15 ene. 2017 a las 13:38
  • Eso que comentas, lo entiendo en cierto modo. Pero entonces, ahora la lógica es tener un solo archivo "index.html" y de resto puros archivos jsx que manejen toda la app ? gracias por responder.
    – jrodriguez
    el 15 ene. 2017 a las 14:14
  • 1
    Esa es la idea de React, hacer las cosas modulares y controladas (por medio de React). Sin embargo si tienes por ejemplo, un dashboard que sirve como layout, entonces en el área de contenido puedes montar tus componentes sin problema, dejando así el HTML del layout intacto.
    – gugadev
    el 15 ene. 2017 a las 14:18

2 respuestas 2

3

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');
1
  • Vale amigo. Ese tema de los componentes en consts. fue lo que apliqué. Gracias.
    – jrodriguez
    el 16 feb. 2017 a las 22:34
1

Puedes usar html externo, esto es practico para los casos en que quieres mostrar por ejemplo una ayuda. En el siguiente codigo 'Loading' es un componente que muestra un gif y un texto a eleccion. usamos un fetch para cargar el archivo html, mientras se esta cargando el archivo html, mostramos el componente 'Loading' cuando termina la carga lo reemplazamos por nuestro html. Usamos dangerouslySetInnerHTML para mostrarlo.

import React from 'react';
import {Logo,Toolstrip,Loading} from '../util/Controles.jsx';
import 'whatwg-fetch';
export default class Visor extends React.Component {
    constructor(props) {
        super(props);
        this.state={html:null};

    }
    render() {
        if(!this.state.html){
            return (<div>
                    <Logo />
                    <Toolstrip>
                   <Loading span="Obteniendo ayuda..." />
                   </Toolstrip>
                    </div>)
        };
        var htm={__html:this.state.html};
         return (<div>
                    <Logo />
                    <Toolstrip>
                    <div dangerouslySetInnerHTML={htm} ></div>

            </Toolstrip>
         </div>);

    }
    componentDidMount() {
        var me=this;
        fetch('ayuda.html')
        .then(function(response) {
            return response.text();
        }).then(function(data) {
          me.setState({html:data});
        }).catch(function(ex) {
            me.setState({html:(<h3>{ex}</h3>)});
        });

    }

 }
2
  • Saca el var me = this y usa arrow functions. Así mismo, es conveniente usar lo menos posible var y darle uso a let y const para un mejor código.
    – gugadev
    el 16 feb. 2017 a las 1:30
  • 1
    Tiene razon, es un efecto residual de escribir en otros lenguajes mas estrictos, gracias!! el 16 feb. 2017 a las 1:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.