ReactJS中如何从父组件向子组件传递参数并调用子组件函数？

这问题我熟，在React里父组件调用子组件的自定义方法，最常用的就是借助ref来实现，具体步骤我给你拆解清楚：

1. 修改子组件（swipe.js）暴露方法 #

函数组件默认不支持直接被父组件获取实例或方法，我们需要用forwardRef包裹组件，再通过useImperativeHandle把swipeDir方法暴露给父组件的ref：

import { forwardRef, useImperativeHandle, useState } from 'react';

// 用forwardRef包裹组件，接收ref参数
const Swipe = forwardRef((props, ref) => {
  const [xPos, setXPos] = useState(0);

  const swipeDir = (dir) => {
    if (dir === 'right') setXPos(300)
    else if (dir === 'left') setXPos(-300)
  };

  // 把swipeDir方法暴露给父组件的ref
  useImperativeHandle(ref, () => ({
    swipeDir
  }));

  return (
    {/* 这里放子组件的原有JSX内容，比如滑动容器 */}
    <div style={{ transform: `translateX(${xPos}px)` }}>子组件滑动内容</div>
  );
});

export default Swipe;

2. 父组件中通过Ref调用子组件方法 #

在父组件里创建一个ref关联子组件，然后在按钮点击事件里通过ref调用子组件的swipeDir方法：

import { useRef } from 'react';
import Swipe from './swipe.js';
import CicleButton from './CicleButton.js'; // 替换成你的按钮组件实际路径

const ParentComponent = () => {
  // 创建ref关联子组件
  const swipeRef = useRef(null);

  return (
    <div>
      {/* 按钮点击时调用子组件的swipeDir方法 */}
      <CicleButton onClick={() => swipeRef.current?.swipeDir('left')}>
        触发左滑
      </CicleButton>
      {/* 把ref传递给子组件 */}
      <Swipe ref={swipeRef} />
    </div>
  );
};

export default ParentComponent;

补充小提示 #

• 用swipeRef.current?.swipeDir('left')的可选链操作符，是为了避免组件还没挂载完成时current为null导致的报错，让代码更健壮。
• 如果你的子组件是类组件，方法会更简单：直接创建ref传递给类组件，然后通过ref.current.swipeDir('left')调用即可，不需要forwardRef和useImperativeHandle。

内容的提问来源于stack exchange，提问作者PacSmack