0
130
VistasRepresentación de una matriz de datos en un componente de carrusel
Estoy trabajando en un carrusel en React JS que actualmente representa un conjunto de números:
import React, { Component } from "react"; import ReactDOM from "react-dom"; import { Wrapper, NumbersWrapper, NumbersScroller, NumberText } from "./Numbers.style"; const hundred = new Array(100) .fill(0) .map((k, v) => ({ key: v, label: v + 1 })); class Carousel extends Component { constructor(props) { super(props); this.state = { activeNumber: 0 }; } setActiveNumber(number) { this.setState({ activeNumber: number }); } render() { const { activeNumber } = this.state; const intAciveNumber = Number(activeNumber); return ( <Wrapper> <NumbersWrapper onClick={() => this.setActiveNumber(intAciveNumber + 1)} > <NumbersScroller style={{ left: `${130 - intAciveNumber * 55}px` }} > {hundred.map(({ key, label }) => { const isNeighbor = key + 1 === activeNumber || key - 1 === activeNumber; const isActive = key === activeNumber; return ( <NumberText key={key} isNeighbor={isNeighbor} isActive={isActive} > {label} </NumberText> ); })} </NumbersScroller> </NumbersWrapper> </Wrapper> ); } } export default Carousel; Ahora me gustaría mostrar números personalizados de una matriz como este ejemplo usando la new palabra clave :
const hundred = new Array([100, 150, 200, 250, 400, 500, 650, 780, 830, 900, 1500]) .fill(0) .map((k, v) => ({ key: v, label: v }));Sin embargo, cuando realizo este cambio en la matriz, no sucede nada. ¿Cómo puedo mostrar correctamente los valores dentro del componente? Si hay una biblioteca NPM que hace esto para React (web), también lo tomaría como una solución. Gracias por adelantado.
2 Respuestas
Responde la pregunta0
He estado usando esto mucho: https://react-slick.neostack.com/
Funciona de maravilla, y muy personalizable.
Algo similar a esto probablemente funcionaría...
import React, { Component } from "react"; import Slider from "react-slick"; export default class SimpleSlider extends Component { render() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return ( <div> <h2> Single Item</h2> <Slider {...settings}> {hundred.map(({label}) => ( <div> {label} </div> ))} </Slider> </div> ); } }0
Debe pasar los valores como parámetros separados en lugar de una matriz como esa.
const hundred = new Array(100, 150, 200, 250, 400, 500, 650, 780, 830, 900, 1500) .fill(0) .map((k, v) => ({ key: v, label: v })); En este momento, está creando una matriz dentro de la matriz de cien en la posición cero, por lo que cuando itera sobre los objetos con .map, solo está revisando un valor único, que contiene la matriz completa. Salida de su implementación actual de inicialización de matriz: 
Cómo funciona con el cambio anterior: 