React中SummedValue组件如何获取嵌套子组件的计算值？

要解决嵌套SummedValue组件的总和传递问题，核心是让子组件（无论层级）能主动把自身值上报给父级，这里用React Context是最优雅的方案，避免逐层传递回调的繁琐。

1. 创建求和上下文 #

用来传递添加/移除值的方法，让所有子组件能和父级SummedValue通信：

import { createContext, useContext, useState, useEffect } from 'react';

const SumContext = createContext({
  addValue: () => {},
  removeValue: () => {},
});

2. 实现Data组件 #

接收props值并维护在state中，同时通过上下文把值上报给父级：

function Data({ value }) {
  // 维护自身state
  const [localValue, setLocalValue] = useState(value);

  const { addValue, removeValue } = useContext(SumContext);

  // 组件挂载/值变化时上报，卸载时移除
  useEffect(() => {
    addValue(localValue);
    return () => removeValue(localValue);
  }, [localValue, addValue, removeValue]);

  // 如果需要允许修改值，可以暴露修改逻辑，比如：
  // const handleIncrement = () => setLocalValue(prev => prev + 1);
  // return <div>{localValue} <button onClick={handleIncrement}>+1</button></div>;

  return <div>{localValue}</div>;
}

3. 重写SummedValue组件 #

通过上下文接收子组件上报的值，计算自身总和，同时把总和上报给父级：

function SummedValue({ children }) {
  const [sum, setSum] = useState(0);
  // 获取父级上下文，用于把自身总和上报给上层SummedValue
  const parentContext = useContext(SumContext);

  // 接收子组件传递的值
  const addValue = (value) => {
    setSum(prev => prev + value);
    // 把值传递给父级SummedValue
    parentContext.addValue(value);
  };

  // 子组件值移除时更新总和
  const removeValue = (value) => {
    setSum(prev => prev - value);
    parentContext.removeValue(value);
  };

  return (
    <SumContext.Provider value={{ addValue, removeValue }}>
      <div>
        <span>总和: {sum}</span>
        {children}
      </div>
    </SumContext.Provider>
  );
}

4. 使用示例 #

按照需求嵌套使用，外层SummedValue会自动计算所有子组件（包括嵌套的SummedValue内部的总和）：

<SummedValue>
  <Data value={3}/>
  <Data value={5}/>
  <SummedValue>
    <Data value={4}/>
    <Data value={1}/>
  </SummedValue>
</SummedValue>

此时内层SummedValue总和是5，外层总和是3+5+5=13，完全符合预期。

原代码问题说明 #

你之前的代码只能读取子组件的props.value，但嵌套SummedValue的总和是内部state，不属于props，自然无法直接获取。而Context方案让每个SummedValue都能接收子组件（Data或其他SummedValue）的值，同时把自身总和传递给父级，完美解决嵌套求和问题。

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