React函数组件间如何传递变量引用？子组件如何向父组件传state或数据？

核心结论 #

• 你示例中<thisComponent myVariable={variable} setMyVariable={setMyVariable}/>的用法完全符合React设计规范，是父子组件通信的标准实现，叫做「状态提升」，直接使用即可。
• 你当前用全局导出变量存储选中值的方案不推荐，存在无法触发组件重渲染、多实例状态冲突的问题。

具体实现步骤 #

1. 改造子组件 #

删除全局变量adminSelectBase，改为通过props接收父组件传入的状态值和状态更新函数：

import React from 'react';
import "./createinquiry.css";

// 从props中解构出父组件传入的状态和更新函数
export default function AdminBaseSelectComponent({ selectedBase, setSelectedBase }) {
    return (
        <>
            <select 
                className="Create-Inquiry-input" 
                // 绑定当前选中值，实现受控组件
                value={selectedBase}
                // 选中变化时调用父组件传入的更新函数修改父组件状态
                onChange={(e) => setSelectedBase(e.target.value)}
            >
                <option value="1">1</option>
                <option value="4">4</option>
                <option value="6">6</option>
                <option value="8">8</option>
                <option value="10">10</option>
                <option value="22">22</option>
                <option value="25">25</option>
                <option value="28">28</option>
                <option value="30">30</option> 
            </select><br/>
        </>
    )
}

2. 父组件调用 #

直接将你已经声明的selectedBase和setSelectedBase通过props传给子组件即可：

import { useState } from 'react';
import AdminBaseSelectComponent from './AdminBaseSelectComponent';

// 父组件示例
function YourParentComponent() {
  const [isAdmin, setIsAdmin] = useState(false);
  // 你已经声明的状态变量
  const [selectedBase, setSelectedBase] = useState("");

  return (
    <div>
      {/* 其他组件逻辑 */}
      {isAdmin ? (
        <AdminBaseSelectComponent 
          selectedBase={selectedBase} 
          setSelectedBase={setSelectedBase} 
        />
      ) : null}
      {/* 父组件可以直接使用selectedBase的最新值 */}
    </div>
  )
}

其他可选方案 #

如果后续出现跨多级组件传递状态的场景，可以选择以下方案：

• 用useContext实现跨层级状态共享，无需逐层传递props
• 引入轻量级状态管理库如Zustand、Jotai存储全局共享状态
• 复杂项目可以使用Redux、Mobx等全量级状态管理方案

就你当前的父子直接通信场景，直接传递state和setter是成本最低、最简洁的实现。

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