React父子组件交互：父组件触发子组件方法实现方案咨询

要让父组件调用子组件内部方法，核心是通过forwardRef和useImperativeHandle将子组件的方法暴露给父组件的ref，以下是针对你代码的具体改造步骤：

1. 改造子组件（Card） #

函数组件默认无法直接通过ref获取内部方法，需要用forwardRef包裹组件，并通过useImperativeHandle指定要暴露给父组件的方法：

import { FC, useRef, forwardRef, useImperativeHandle } from 'react'
import styles from './Card.module.scss'

// 定义子组件暴露给父组件的方法类型
interface CardHandle {
  scroll: (offset: number) => void
}

const Card: FC<CardProps> = forwardRef<CardHandle, CardProps>(({ image, title, info }, ref) => {
  const cardRef = useRef<HTMLDivElement>(null)
  
  const scroll = (offset: number) => {
    if (cardRef.current) {
      cardRef.current.scrollLeft += offset
    }
  }

  // 将scroll方法暴露给父组件的ref
  useImperativeHandle(ref, () => ({
    scroll
  }))

  return (
    <div className={styles.card} ref={cardRef}>
      <img src={image} alt={image.split('.')[0]} height={170} width={96} />
      <div className={styles['card-info-container']}>
        <h3>{title}</h3>
        <p>{info}</p>
        <img src="Chevron.svg" alt="Chevron" />
      </div>
    </div>
  )
})

export default Card

interface CardProps {
  image: string
  title: string
  info: string
}

2. 改造父组件（Campaigns） #

创建子组件的ref，在需要触发的地方（比如按钮点击）调用子组件暴露的scroll方法：

import Card from '../Card/Card'
import styles from './Campaigns.module.scss'
import { campaignData } from '../../mockdata/campaigndata'
import { useRef } from 'react'

// 引入子组件暴露的方法类型
import type { CardHandle } from '../Card/Card'

const Campaigns = () => {
  // 创建子组件的ref数组，存储每个子组件的实例引用
  const cardRefs = useRef<(CardHandle | null)[]>([])

  // 示例：点击按钮触发第一个子组件的scroll方法
  const handleScrollFirstCard = () => {
    if (cardRefs.current[0]) {
      cardRefs.current[0].scroll(50) // 传入偏移量
    }
  }

  return (
    <section className={styles.campaigns}>
      <h3>Campaigns</h3>
      {/* 添加触发按钮示例 */}
      <button onClick={handleScrollFirstCard}>滚动第一个卡片</button>
      <div className={styles['cards-container']}>
        {campaignData.map(({ image, title, description }, index) => (
          <Card 
            image={image} 
            title={title} 
            info={description} 
            key={index}
            // 将每个子组件的ref存入数组
            ref={(el) => (cardRefs.current[index] = el)}
          />
        ))}
      </div>
    </section>
  )
}

export default Campaigns

关键说明 #

• forwardRef：允许父组件将ref传递给子组件，突破函数组件默认无法接收父组件ref的限制
• useImperativeHandle：自定义子组件通过ref暴露给父组件的内容，避免暴露整个内部结构，保证组件封装性
• 若需操作多个子组件，可用ref数组存储每个子组件的引用，通过索引调用对应组件的方法

内容的提问来源于stack exchange，提问作者Orçun Güler