如何在React函数组件中导出函数以构建组件库？

你当前直接导出addParticle的方式行不通——因为这个函数定义在ParticleContainer组件内部，依赖组件实例的state，每次组件渲染都会生成新的函数，顶层导出的addParticle不会绑定任何组件实例的状态，调用后无法更新粒子列表。

下面是两种可行的解决方案：

方案1：使用forwardRef + useImperativeHandle暴露方法 #

这是React官方推荐的、用于向父组件暴露组件内部方法的方式，适合封装内部状态的场景。

修改ParticleContainer组件 #

import React, { useState, forwardRef, useImperativeHandle } from "react";
import Particle from "../Particle";
import "./ParticleContainer.css";

export interface AddParticleProps {
  src: string;
  height: string;
  width: string;
  animationDuration: number;
}

interface ParticleContainerProps {
  height?: string;
  width?: string;
  position?: "relative" | "absolute";
}

// 定义组件实例暴露给ref的方法类型
export interface ParticleContainerHandle {
  addParticle: (props: AddParticleProps) => void;
}

// 用forwardRef包裹组件，传递ref参数
const ParticleContainer = forwardRef<ParticleContainerHandle, ParticleContainerProps>(({
  height = "40px",
  width = "40px",
  position,
}, ref) => {
  const [particleDetails, setParticleDetails] = useState<AddParticleProps[]>([]);

  // 使用函数式更新避免闭包捕获旧state的问题
  const addParticle = ({
    src,
    height,
    width,
    animationDuration,
  }: AddParticleProps) => {
    setParticleDetails(prev => [...prev, { src, height, width, animationDuration }]);
  };

  // 向外部暴露addParticle方法
  useImperativeHandle(ref, () => ({
    addParticle,
  }), [addParticle]);

  return (
    <div className="particlesContainer" style={{ height, width, position }}>
      {particleDetails.map((props, index) => (
        <Particle key={index} id={index} {...props} />
      ))}
    </div>
  );
});

export default ParticleContainer;

用户使用示例 #

import { useRef } from "react";
import ParticleContainer, { AddParticleProps, ParticleContainerHandle } from "./ParticleContainer";

function App() {
  const containerRef = useRef<ParticleContainerHandle>(null);

  const handleAddParticle = () => {
    const newParticle: AddParticleProps = {
      src: "particle.png",
      height: "30px",
      width: "30px",
      animationDuration: 2000,
    };
    // 通过ref调用组件内部的addParticle方法
    containerRef.current?.addParticle(newParticle);
  };

  return (
    <div>
      <button onClick={handleAddParticle}>添加粒子</button>
      <ParticleContainer ref={containerRef} />
    </div>
  );
}

方案2：状态提升到父组件 #

如果希望遵循React单向数据流原则，让用户完全控制粒子状态，可以把粒子列表的state从组件内部移到父组件中。

修改ParticleContainer组件 #

import React from "react";
import Particle from "../Particle";
import "./ParticleContainer.css";

export interface AddParticleProps {
  src: string;
  height: string;
  width: string;
  animationDuration: number;
}

interface ParticleContainerProps {
  height?: string;
  width?: string;
  position?: "relative" | "absolute";
  // 接收父组件传递的粒子列表
  particles: AddParticleProps[];
}

function ParticleContainer({
  height = "40px",
  width = "40px",
  position,
  particles,
}: ParticleContainerProps) {
  return (
    <div className="particlesContainer" style={{ height, width, position }}>
      {particles.map((props, index) => (
        <Particle key={index} id={index} {...props} />
      ))}
    </div>
  );
}

export default ParticleContainer;

用户使用示例 #

import { useState } from "react";
import ParticleContainer, { AddParticleProps } from "./ParticleContainer";

function App() {
  // 父组件管理粒子状态
  const [particles, setParticles] = useState<AddParticleProps[]>([]);

  const addParticle = (props: AddParticleProps) => {
    setParticles(prev => [...prev, props]);
  };

  const handleAddParticle = () => {
    const newParticle: AddParticleProps = {
      src: "particle.png",
      height: "30px",
      width: "30px",
      animationDuration: 2000,
    };
    addParticle(newParticle);
  };

  return (
    <div>
      <button onClick={handleAddParticle}>添加粒子</button>
      <ParticleContainer particles={particles} />
    </div>
  );
}

方案对比 #

• 方案1：封装性强，用户无需管理状态，只需调用组件暴露的方法；但打破了单向数据流，适合组件内部状态不需要用户干预的场景。
• 方案2：符合React设计原则，状态透明可控；但需要用户自行管理粒子列表，增加了用户代码量。

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