React JS 组件间高效传值及赋值给指定state setter的方案咨询

1. 需求实现方式与React组件高效传值方案 #

实现方式 #

根据两个组件的层级关系，有两种主流实现方案：

• 若Account和SalesAdd是父子/祖孙关系：优先用状态提升方案，把共享状态提到两个组件的最近公共父组件中维护，再通过props传递给子组件。
  示例代码如下：
  公共父组件（假设Account是父组件，SalesAdd是其子组件）：

  import { useState } from 'react';
  import SalesAdd from "pages/Sales-Add/index";
  import Input from '你的Input组件引入路径';
  
  export default function Account (){
      // 将共享状态提升到公共父组件
      const [sales, setSales] = useState("");
      return (
          <>
              <Input 
                  type="text" 
                  className="form-control" 
                  onChange={(e) => setSales(e.target.value)}
              />
              {/* 将状态通过props传递给SalesAdd组件 */}
              <SalesAdd sales={sales} />
          </>
      )
  }
  

  SalesAdd组件代码：

  export default function SalesAdd({sales}) {
      // 直接使用父组件传递的props即可
      return <h1>{sales}</h1>
  }
  

• 若两个组件层级相隔很远、没有公共的近层父组件：
  • 跨层级不复杂的场景用React原生Context API维护共享状态
  • 大型项目、全局共享状态多的场景用轻量状态管理库如Zustand、Jotai，或者Redux等成熟状态管理方案。

组件高效传值优先级 #

按推荐度从高到低排序：

1. 近层级父子组件：props透传 + 状态提升，性能最高、逻辑最清晰，无额外依赖
2. 跨2-3层组件：Context API，React原生支持，适配中等复杂度场景
3. 全局/复杂跨层级状态：第三方状态管理库，可根据项目复杂度选择对应工具

2. 现有代码存在的问题 #

• React函数组件没有render方法，你写的render()是类组件的语法，函数组件直接return JSX即可
• 组件内部的useState返回的状态和更新方法是组件私有属性，只能在组件内部访问，直接导入组件后调用SalesAdd.setSales的写法完全错误，导出的组件是函数本身，不存在setSales属性
• 事件绑定名称错误：你定义的回调函数名为onchangeValue，但Input的onChange事件里调用的是不存在的onchange方法
• 组件命名不符合React规范：组件必须用大驼峰命名，sales_add要改为SalesAdd，account要改为Account
• 没有引入useState就直接使用，代码运行会直接报错

3. 需求可行性与实践规范 #

需求完全可以实现，使用上述状态提升/Context/状态管理的实现方案都是React官方推荐的标准写法，属于最佳实践；如果采用全局变量、自定义事件等方式强制跨组件修改状态，则属于不良实践，会导致数据流混乱、调试难度大幅提升，不推荐使用。

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