React.js中如何向兄弟组件传递值？两数求和案例实现

要实现InputNumbers和PrintAddition这两个兄弟组件的通信，核心方案是状态提升——把共享的数值状态放到它们的共同父组件App中，再通过props将状态、更新方法以及计算结果分发给对应的子组件。具体修改步骤如下：

1. 将状态移至父组件App
   把原本在InputNumbers里的num1、num2状态和对应的更新函数，转移到App组件中统一管理。

2. 给InputNumbers传递状态更新方法
   把父组件的setNum1、setNum2作为props传给InputNumbers，让子组件可以更新父组件的状态。

3. 给PrintAddition传递求和结果
   在父组件中计算两个数的和，然后把结果作为props传给PrintAddition用于展示。

4. 处理输入值的类型转换
   输入框的value默认是字符串类型，需要转换为数字后再更新状态，避免求和时出现字符串拼接的问题。

修改后的完整代码 #

import { useState } from 'react';

function App() {
  // 父组件管理共享状态
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);
  
  // 计算求和结果
  const sum = Number(num1) + Number(num2);

  return (
    <div>
      {/* 给InputNumbers传递状态更新方法 */}
      <InputNumbers setNum1={setNum1} setNum2={setNum2} />
      {/* 给PrintAddition传递求和结果 */}
      <PrintAddition sum={sum} />
    </div>
  );
}

function PrintAddition({ sum }) {
  return (
    <div>
      <p>
        两数之和为：<span>{sum}</span>
      </p>
    </div>
  );
}

function InputNumbers({ setNum1, setNum2 }) {
  return (
    <div>
      <input
        className="num1"
        type="number" {/* 改成number类型更合适，限制输入为数字 */}
        onChange={(e) => setNum1(e.target.value)}
      />
      <input
        className="num2"
        type="number"
        onChange={(e) => setNum2(e.target.value)}
      />
    </div>
  );
}

额外说明 #

• 把输入框的type改成number，可以直接限制用户输入数字，减少类型转换的潜在问题。
• 如果需要处理空输入的情况，可以在计算求和时增加判断，比如const sum = (Number(num1) || 0) + (Number(num2) || 0)，避免出现NaN的情况。

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