-
check_circle_outlineMódulo 1 | 3 clases
Introducción
expand_more -
check_circle_outlineMódulo 2 | 4 clases
Fundamentos
expand_more -
check_circle_outlineMódulo 3 | 8 clases
Navegando entre páginas
expand_more-
done_all
Clase 1
AppBar Material Design
-
done_all
Clase 2
Controles formulario Login
-
done_all
Clase 3
Componentes funcionales
-
done_all
Clase 4
Controles formulario crear cuenta
-
done_all
Clase 5
Rutas en componentes
-
done_all
Clase 6
Rutas Dinámicas
-
done_all
Clase 7
Dashboard para usuarios
-
done_all
Clase 8
Componente para mostrar negocios
-
-
check_circle_outlineMódulo 4 | 4 clases
Animar transiciones
expand_more -
check_circle_outlineMódulo 5 | 9 clases
Consumir servicio web
expand_more
3 comentario(s)
Yo lo que decidí hacer (por probar y antes de ver lo de las condiciones en los path) es crear un componente "formulario" el cual en las partes que diferían entre las paginas de login y registro recibían una propiedad, la cual posteriormente pasaba al importarlos en las 2 paginas, mi duda es si lo que hice es correcto, ya que funcionar funciona, pero no se si es correcto hacerlo o si no se les debe dar ese uso a las props, espero su respuesta y gracias.
Trate de refactorizarlo quedándome con algo así
import React, {Component} from 'react'; import Title from '../components/Title'; import Container from '../components/Container'; import TextField from 'material-ui/TextField'; import RaisedButton from 'material-ui/RaisedButton'; import { Link } from 'react-router-dom';export default class LoginSign extends Component{
constructor(props){ super(props); var textoBoton, textoLink, urlLink, imagen; if(props.location.pathname === '/login'){ textoBoton = 'Ingresar'; textoLink = 'Crear una Cuenta'; urlLink = '/signup'; imagen = 'login-background.jpg'; }else if(props.location.pathname === '/signup'){ textoBoton = 'Crear una Cuenta'; textoLink = 'Ya tengo cuenta'; urlLink = '/login'; imagen = 'signup.jpg'; } this.state = { textoBoton, textoLink, urlLink, imagen } } render(){ return( <div <em>className</em>="row middle-xs"> <div <em>className</em>="col-xs-12 col-sm-6"> <Container> <div <em>style</em>={{ textAlign: 'left' }}> <Title /> <TextField <em>floatingLabelText</em>="Email" <em>type</em>="email" <em>className</em>="textfield" /> <TextField <em>floatingLabelText</em>="Contraseña" <em>type</em>="password" <em>className</em>="textfield" /> <div <em>className</em>="Login-actions"> <div> <Link <em>to</em>={this.state.urlLink} <em>style</em>={{ marginRight: '1em' }}> {this.state.textoLink} </Link> <RaisedButton <em>label</em>={this.state.textoBoton} <em>secondary</em>={true} /> </div> </div> </div> </Container> </div> <div <em>className</em>="col-xs-12 col-sm-6"> <div <em>className</em>="Login-background" <em>style</em>={{ backgroundImage: `url(${process.env.PUBLIC_URL}/images/${this.state.imagen})` }} ></div> </div> </div> ) }
}
Clase 11