ReactJS：如何在app.js中访问外部组件内的const常量getcamper4x4wei

React函数组件内部用const声明的变量属于组件闭包作用域的私有变量，父组件没有办法直接读取，你可以根据实际场景选下面两种合规的实现方式：

方案1：计算逻辑上移（优先推荐，符合React设计规范） #

你要获取的getcamper4x4wei本身完全依赖传入Weights的data、country两个props计算得到，根本不需要放在子组件里算。直接把这段逻辑移到app.js中计算，Weights组件如果需要用到这个值，再作为props传进去就行，是最简单、维护性最高的方案。
app.js示例代码：

import { useMemo, useState } from 'react'
import Weights from './weights'

export default function App() {
  // 你原本在App中维护的传给Weights的状态
  const [data, setData] = useState([])
  const [country, setCountry] = useState({})

  // 把Weights里的计算逻辑移到这里
  const getcamper4x4wei = useMemo(() => {
    const initialValue = 0
    if (country?.label === "4x4 TOWING CAMPER") {
      const targetList = data.filter(el => el.packingLocation === "4x4")
      return targetList.reduce(
        (prev, curr) => prev + Number(curr.Weight) * Number(curr.Quantity),
        initialValue
      )
    }
    return 0 // 补全不满足条件时的默认返回值，避免拿到undefined
  }, [data, country]) 
  // 注意：你原来的useMemo依赖漏写了country，country变动时值不会更新，这里已经修复

  // 这里可以直接访问、使用getcamper4x4wei
  console.log('4x4重量：', getcamper4x4wei)

  return (
    <Weights 
      data={data} 
      country={country} 
      // 其余props正常传递即可
      // listItemUser={xxx}
      // gear={xxx}
      // 如果Weights内部需要用到这个计算值，多传一个props下去就行
      // camper4x4wei={getcamper4x4wei}
    />
  )
}

方案2：通过回调Props将值从子组件传给父组件 #

如果因为业务封装要求，这段计算逻辑必须保留在Weights组件内部，可以给Weights加一个回调类型的prop，子组件计算完成后主动把值抛给父组件。
首先修改weights.js中的Weights组件：

import { useMemo, useEffect } from 'react'
const Weights = ({ data, country, listItemUser, gear, onWeightChange }) => {
  // 你原有的newarr、newarr2逻辑这里省略，顺便提一句：直接在组件渲染函数里循环push外部数组会导致重复渲染时数据重复累加，建议把这两个数组的生成也改成用useMemo缓存
  const getcamper4x4wei = useMemo(() => {
    const initialValue = 0
    if (country?.label === "4x4 TOWING CAMPER") {
      const targetList = data.filter(el => el.packingLocation === "4x4")
      return targetList.reduce(
        (prev, curr) => prev + Number(curr.Weight) * Number(curr.Quantity),
        initialValue
      )
    }
    return 0
  }, [data, country]);

  // 值变化时通过回调传给父组件
  useEffect(() => {
    onWeightChange?.(getcamper4x4wei)
  }, [getcamper4x4wei, onWeightChange])

  // 你原有的组件返回JSX逻辑不变
}
export default Weights

然后在app.js中接收值：

import { useState } from 'react'
import Weights from './weights'

export default function App() {
  // 用一个状态存子组件传过来的重量值
  const [camper4x4Weight, setCamper4x4Weight] = useState(0)

  // 这里的camper4x4Weight就是你要的Weights内部的getcamper4x4wei值
  console.log('拿到子组件的重量值：', camper4x4Weight)

  return (
    <Weights 
      data={/* 你原本的data值 */}
      country={/* 你原本的country值 */}
      listItemUser={/* 你原本的listItemUser值 */}
      gear={/* 你原本的gear值 */}
      onWeightChange={setCamper4x4Weight}
    />
  )
}

补充说明：不要尝试用ref暴露整个组件实例的方式拿这个值，这种方案会打破React单向数据流的约定，后续维护很容易出bug，只有在必须触发子组件内部聚焦、动画触发这类场景才推荐用ref。

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