从另一个页面调用页面内部的组件函数

Question

我正在尝试了解如何从另一个名为 CardFooter.js 的 JS 文件中触发 OnSwipe，该文件包含一个按钮，而 OnClick 会从之前的名为 CardItem.js 的 JS 文件中触发 OnSwipe。它们都在 Card.js.

中被调用

我正在学习使用 Reactjs 组件的 Nextjs。任何见解将不胜感激

CardFooter.js

import { CardItem }  from '../components/CardItem'

const CardFooter = () => { 

   return (
   
       <Button onClick={() => CardItem.onSwipe('left')}></Button>;
       <Button onClick={() => CardItem.onSwipe('right')}></Button>;

   )
}

export default CardFooter

CardItem.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 CardItem

Card.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 Card

Answer 1

在 React 中，您不能将 props 从子组件传递到父组件。这意味着您将无法将 handleSwipe 函数传递到 <CardFooter>.

但看起来您无论如何都不需要这样做，因为您的 Context 中有 handleRightSwipe 和 handleLeftSwipe 函数，并且所有 handleSwipe 函数真正做的是调用那些函数。

所以，考虑到这一点，有两个解决方案：

在您的页脚中，导入上下文并使用它，然后当用户单击右侧按钮时，调用 handleRightSwipe，并为左侧按钮调用 handleLeftSwipe。（这是天真的解决方案）
在父 <Card> 组件中定义 handleSwipe，然后将其作为 prop 传递给两个组件。这样，您只需要定义一次函数。 (理想解)

从另一个页面调用页面内部的组件函数

Call component function that inside a page from another page

javascript

reactjs

next.js