React项目点击数字页面不显示但控制台可输出，求助解决

你的代码存在两个核心问题，导致点击的数字无法在页面显示：

1. 错误调用组件函数：点击Square按钮时，你直接执行Clicked(props.value)，这只是在控制台打印了props，但并没有将Clicked组件作为React元素渲染到页面中，也不会触发任何组件更新。
2. 缺少状态管理：没有用React的状态来跟踪点击的数字，React组件只有在状态（state）或属性（props）变化时才会重新渲染页面。

修改后的完整代码 #

import React, { useState } from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

function Clicked(props) {
  return <h1>Number:{props.value}</h1>;
}

function Square(props) {
  // 点击时调用父组件传递的回调函数，传递当前数字
  return (
    <button className="square" onClick={() => props.onClick(props.value)}>
      {props.value}
    </button>
  );
}

function renderSquare(i, onClick) {
  // 将回调函数传递给Square组件
  return <Square value={i} onClick={onClick} />;
}

function Board(props) {
  const status = "Next player: X";
  return (
    <div>
      <div className="status">{status}</div>
      <div className="board-row">
        {renderSquare(0, props.onSquareClick)}
        {renderSquare(1, props.onSquareClick)}
        {renderSquare(2, props.onSquareClick)}
      </div>
      <div className="board-row">
        {renderSquare(3, props.onSquareClick)}
        {renderSquare(4, props.onSquareClick)}
        {renderSquare(5, props.onSquareClick)}
      </div>
      <div className="board-row">
        {renderSquare(6, props.onSquareClick)}
        {renderSquare(7, props.onSquareClick)}
        {renderSquare(8, props.onSquareClick)}
      </div>
    </div>
  );
}

function Game() {
  // 使用useState维护点击的数字状态，初始值可以设为null或空
  const [clickedNumber, setClickedNumber] = useState(null);

  // 定义更新状态的回调函数
  const handleSquareClick = (value) => {
    console.log(value);
    setClickedNumber(value);
  };

  return (
    <div className="game">
      <div className="game-board">
        {/* 将状态值传递给Clicked组件 */}
        <Clicked value={clickedNumber} />
        {/* 将回调函数传递给Board组件 */}
        <Board onSquareClick={handleSquareClick} />
      </div>
      <div className="game-info">
        <div>{/* status */}</div>
        <ol>{/* TODO */}</ol>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Game />);

关键修改点说明 #

• 添加状态管理：在Game组件中用useState创建clickedNumber状态，用来存储用户点击的数字，setClickedNumber用来更新这个状态。
• 传递回调函数：将更新状态的handleSquareClick函数通过props传递给Board，再逐层传递给Square，这样点击按钮时就能触发状态更新。
• 正确渲染组件：Clicked组件始终在Game的JSX中渲染，通过props接收最新的clickedNumber值，当状态变化时，React会自动重新渲染Clicked组件，更新页面显示。

内容的提问来源于stack exchange，提问作者신민준