导出React组件内startConsume函数报错：export 'startConsume' is not defined

你遇到的错误原因很明确：startConsume 是定义在 Actor 函数组件内部的局部函数，模块级别的 export 语句无法访问组件内部的变量，自然会提示“未定义”。

下面给出两种可行的解决方案，根据你的业务场景选择：

方案一：将函数移到组件外部（模块级导出） #

如果 startConsume 的逻辑不依赖组件内部的状态或Three.js对象，可以直接把它移到组件外面，变成模块级函数：

import React, { useRef, useEffect } from "react";
import { useFrame, useThree } from "react-three-fiber";
import * as THREE from "three";

// 移到组件外部，变成模块级函数
const startConsume = (instructions, mesh) => {
  console.log(instructions);
  // 如果需要操作mesh，通过参数传入
  if (mesh) {
    mesh.instructions = instructions;
    // 这里可以继续编写原逻辑
  }
};

const Actor = () => {
  const meshRef = useRef();
  const { scene } = useThree();

  useEffect(() => {
    // ...原组件内的mesh创建逻辑不变...
    meshRef.current = mesh;
  }, [scene]);

  const consumeCommands = (mmm) => {
    console.log('aa');
  };

  useFrame(() => {
    consumeCommands();
  });

  // 如果组件内部需要调用startConsume，传入meshRef.current
  // 比如：startConsume(someInstructions, meshRef.current);

  return null;
};

export { Actor, startConsume };

方案二：通过Ref暴露组件内部方法（适合依赖组件内部资源的场景） #

如果 startConsume 需要操作组件内部的 meshRef 或其他状态，就需要用React的forwardRef和useImperativeHandle来暴露内部方法：

import React, { useRef, useEffect, forwardRef, useImperativeHandle } from "react";
import { useFrame, useThree } from "react-three-fiber";
import * as THREE from "three";

// 用forwardRef包裹组件，允许外部获取组件的ref
const Actor = forwardRef((props, ref) => {
  const meshRef = useRef();
  const { scene } = useThree();

  useEffect(() => {
    // ...原组件内的mesh创建逻辑不变...
    meshRef.current = mesh;
  }, [scene]);

  const consumeCommands = (mmm) => {
    console.log('aa');
  };

  const startConsume = (instructions) => {
    console.log(instructions);
    // 直接访问组件内部的meshRef
    if (meshRef.current) {
      meshRef.current.instructions = instructions;
      // 继续编写你的指令执行逻辑
    }
  };

  useFrame(() => {
    consumeCommands();
  });

  // 暴露startConsume方法给外部
  useImperativeHandle(ref, () => ({
    startConsume
  }));

  return null;
});

export default Actor;

在其他文件中使用时，通过ref调用方法：

import Actor from './Actor';
import { useRef } from 'react';

const YourComponent = () => {
  const actorRef = useRef();

  const triggerConsume = () => {
    const testInstructions = [/* 你的指令数组 */];
    // 通过ref调用组件内部的startConsume
    actorRef.current.startConsume(testInstructions);
  };

  return (
    <>
      <Actor ref={actorRef} />
      <button onClick={triggerConsume}>执行指令</button>
    </>
  );
};

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