0

Estoy usando react-slick y quiero tener dos configuraciones diferentes para mobile y desktop. Actualmente tengo un objeto con la configuracion:

const sliderSettings = {
  adaptiveHeight: true,
  centerMode: true,
  ....
}

Y cuando llamo al slider hago

<Slider {...sliderSettings}/>

Ahora yo quiero tener un objeto diferente para mobile, ya tengo una variable isMobile disponible, y quiero hacer algo como

<Slider {isMobile ? {...sliderSettingsMobile} : {...sliderSettings}}/>

Probe de esta forma y algunas similares pero me arroja un error "..." expected

Alguien sabe cual es la forma correcta de enviar el objeto props condicionalmente?

1
  • crea una variable sliderSettingsProps cuyo valor cambia condicionalmente en el padre y al hijo pasale como prop sliderSettingsProps
    – Ivandez
    Commented el 18 ago. 2022 a las 14:49

1 respuesta 1

2

Has probado de esta manera?

const isMobile = true;
const desktopSettings = { centerMode: false };
const mobileSettings = { centerMode: true };
const settings = isMobile ? mobileSettings : desktopSettings;

<Slider {...settings} />

También lo puedes hacer así:

const isMobile = true;
const desktopSettings = { centerMode: false };
const mobileSettings = { centerMode: true };

<Slider {...(isMobile ? mobileSettings : desktopSettings)} />
1
  • Es la respuesta que buscaba, lamentablemente no me sirvio, al parecer el componente react-slick no acepta cambiar de props asi a la ligera, tengo que generar un componente u otro depende de la situacion. De todas maneras, la segunda solucion responde a mi pregunta. Aceptada.
    – Agustin G.
    Commented el 19 ago. 2022 a las 14:10

Tu Respuesta

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

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