Desarrollo una App en REACT JS
que con un botón
debería cambiar la presentación de los items.
Es decir si pulso grilla
debería mostrarme en cuadrícula
, al pulsar lista
, pues todo enlazado con las especificación del item.
mi componente <Products />
ya lo tengo invocado que se imprime sin problemas, ¿cómo cambiaria por <Products2 />
en mismo panel
ya de manera diferente?
¿alguna idea o sugerencia?
lo que en JQuery podemos lograrlo con:
$("#bgrilla").click(function(){
// Limpiamos Contenedor
$("#contenedor").html("");
// Volvemos a listar datos
$.get("",function(r){
// r , seria el resultado que nos trae la Lista de datos
// codigo para imprimir en grilla
});
});
$("#blista").click(function(){
// Limpiamos Contenedor
$("#contenedor").html("");
// Volvemos a listar datos
$.get("",function(r){
// r , seria el resultado que nos trae la Lista de datos
// codigo para imprimir en Lista
});
});
y este es mi componete que me lista los datos en grilla
import React, { Component } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
export default class Products extends Component {
constructor(props) {
super();
this.state = {};
}
addproducto(i) {
this.props.addproducto(i);
}
imagen(item) {
if (item.imagen != '') {
return (
<img
alt={item.description}
className="ima"
src={'assets/pro/' + item.imagen}
/>
);
} else {
return <img alt={item.description} className="ima" src="https://" />;
}
}
render() {
const items = this.props.lista.map((item, i) => (
<div key={i} className="col-sm-3">
<div onClick={this.addproducto.bind(this, i)} className="producto">
<div className="imagen" id={'producto' + item.id}>
{this.imagen(item)}
<div id={'marca' + item.id} className="marca0"></div>
</div>
<div className="justify-content-center text-center">
<h6>
{item.nombre} {item.description}
</h6>
<h5>{item.coins.symbol + item.PVP}</h5>
</div>
</div>
</div>
));
return (
<ReactCSSTransitionGroup
component={React.Fragment}
transitionName="example"
transitionEnterTimeout={1000}
transitionLeaveTimeout={500}
>
{items}
</ReactCSSTransitionGroup>
);
}
}