React函数式组件计算器渲染故障：数字按键显示问题咨询

完全无需改用类组件，页面无法渲染是由几个基础React语法错误导致的，修复后即可正常运行，具体问题和解决方法如下：

错误原因及修复步骤 #

1. Output组件未接收props参数
   Output组件定义时未声明props参数，直接使用props.currentValue会触发未定义错误。修改为接收props的形式：

   const Output = (props) => {
     return <div id="display">{props.currentValue}</div>;
   };
   

2. Buttons组件无法访问父组件的handleNumbers函数
   handleNumbers是Calculator组件内部的处理函数，Buttons组件无法直接访问该函数，需通过props传递：

   • 在Calculator组件中传递函数：

     <Buttons handleNumbers={handleNumbers} />
     

   • 在Buttons组件中接收并使用：

     const Buttons = ({ handleNumbers }) => {
       // ... 其余按键代码
       <button id="one" value="1" onClick={handleNumbers}>1</button>
     };
     

3. 缺少ReactDOM导入
   原代码使用ReactDOM.render但未导入ReactDOM库，需在JS开头添加：

   import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
   

4. 优化数字输入逻辑（可选）
   原handleNumbers会直接覆盖输入值，无法输入多位数。可优化逻辑实现连续输入：

   const handleNumbers = (event) => {
     const value = event.target.value;
     setInput(prev => prev === "0" ? value : prev + value);
   };
   

修复后的完整JS代码 #

import * as React from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

function Calculator() {
  const [input, setInput] = React.useState("0");

  const handleNumbers = (event) => {
    const value = event.target.value;
    setInput(prev => prev === "0" ? value : prev + value);
  };

  return (
    <div>
      <div className="calculator">
        <History />
        <Output currentValue={input} />
        <Buttons handleNumbers={handleNumbers} />
      </div>
    </div>
  );
}

const History = () => {
  return <div id="history"> </div>;
};

const Output = (props) => {
  return <div id="display">{props.currentValue}</div>;
};

const Buttons = ({ handleNumbers }) => {
  return (
    <div className="buttons">
      <button id="clear" value="AC" className="jumbo">
        AC
      </button>
      <button id="divide" value="/">
        /
      </button>
      <button id="multiply" value="x">
        x
      </button>
      <button id="seven" value="7" onClick={handleNumbers}>
        7
      </button>
      <button id="eight" value="8" onClick={handleNumbers}>
        8
      </button>
      <button id="nine" value="9" onClick={handleNumbers}>
        9
      </button>
      <button id="subtract" value="-">
        -
      </button>
      <button id="four" value="4" onClick={handleNumbers}>
        4
      </button>
      <button id="five" value="5" onClick={handleNumbers}>
        5
      </button>
      <button id="six" value="6" onClick={handleNumbers}>
        6
      </button>

      <button id="add" value="+">
        +
      </button>

      <button id="one" value="1" onClick={handleNumbers}>
        1
      </button>
      <button id="two" value="2" onClick={handleNumbers}>
        2
      </button>
      <button id="three" value="3" onClick={handleNumbers}>
        3
      </button>
      <button id="equals" value="=">
        =
      </button>
      <button id="zero" value="0" className="jumbo" onClick={handleNumbers}>
        0
      </button>

      <button id="decimal" value=".">
        .
      </button>
    </div>
  );
};

ReactDOM.render(<Calculator />, document.getElementById("root"));

补充说明 #

修复完成后，点击数字按键会在输出区正常显示，且支持多位数连续输入。CSS代码无需修改，保持原内容即可。

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