Estoy tratando de entender cómo puedo activar OnSwipe desde dentro de otro archivo JS llamado CardFooter.js que contiene un botón con OnClick activando OnSwipe desde el archivo JS anterior llamado CardItem.js. Ambos se llaman dentro de Card.js.
Estoy aprendiendo Nextjs con componentes Reactjs. Cualquier idea sería muy apreciada
CardFooter.js
import { CardItem } from '../components/CardItem' const CardFooter = () => { return ( <Button onClick={() => CardItem.onSwipe('left')}></Button>; <Button onClick={() => CardItem.onSwipe('right')}></Button>; ) } export default CardFooterElementoCardItem.js
import { useState, useContext, createContext } from 'react' import { Context } from '../context/Context' import TinderCard from 'react-tinder-card' import { test } from '../components/CardFooter'; export const CardItem = ({ card }) => { const { handleRightSwipe, handleLeftSwipe, currentAccount } = useContext(Context) const onSwipe = dir => { if (dir === 'right') { handleRightSwipe(card, currentAccount) } if (dir === 'left') { handleLeftSwipe(card, currentAccount) } } return ( <TinderCard preventSwipe={['up', 'down']} onSwipe={onSwipe} > <div style={{ backgroundImage: `url('${card.imageUrl}')` }}> <div> {card.name} </div> </div> </TinderCard> ) } export default CardItemTarjeta.js
import { useContext } from 'react' import { Context } from '../context/Context' import CardFooter from './CardFooter' import CardItem from './CardItem' const Card = () => { const { cardsData } = useContext(Context) return ( <div className={style.wrapper}> <div className={style.cardMain}> <div className={style.swipesContainer}> {cardsData.map((card, index) => ( <CardItem card={card} key={index} /> ))} </div> </div> <CardFooter /> </div> ) } export default CardEn React, no puede pasar accesorios de componentes secundarios a componentes principales. Esto significa que no podrá pasar la función handleSwipe hasta <CardFooter> .
Pero no parece que necesite hacer eso de todos modos, ya que tiene las funciones handleRightSwipe y handleLeftSwipe dentro de su Context , y todo lo que la función handleSwipe realmente está haciendo es llamar a esas funciones.
Entonces, con esto en mente, hay dos soluciones:
En su pie de página, importe el contexto y utilícelo, luego, cuando el usuario haga clic en el botón derecho, llame a handleRightSwipe y handleLeftSwipe para el botón izquierdo. (esta es la solución ingenua)
Defina handleSwipe dentro del componente principal <Card> , luego páselo como accesorio a ambos componentes. De esta manera, solo necesita definir la función una vez. (solución ideal)