我点击的数字没有出现在反应项目的屏幕上答案

【问题标题】：my clicked number is not appear in screen in react project我点击的数字没有出现在反应项目的屏幕上
【发布时间】：2023-02-02 21:03:41
【问题描述】：

当我试图在屏幕上呈现点击的数字时，数字没有出现。但它确实可以在控制台中显示我不知道如何修复它应该在“号码：”旁边的屏幕中应用的号码

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

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

function Square(props) {
  return (
    <button className="square" onClick={() => Clicked(props.value)}>
      {props.value}
    </button>
  );
}

function renderSquare(i) {
  return <Square value={i} />;
}

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

function Game() {
  return (
    <div className="game">
      <div className="game-board">
        <Clicked />
        <Board />
      </div>
      <div className="game-info">
        <div>{/* status */}</div>
        <ol>{/* TODO */}</ol>
      </div>
    </div>
  );
}

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

没有语法错误，所以我真的不明白这个问题的意义所在。请帮我

【问题讨论】：

标签： reactjs react-hooks frontend rendering

【解决方案1】：

在 React 中，更改视图（显示给用户的内容，或在 DOM 中布局的内容）的方法是更改状态.当状态更改时，将触发重新渲染，并且 React 会协调返回的 React 元素的更改结构与当前渲染的结构（通过 virtual DOM）。

从点击处理程序返回一个值不会做任何事情。当点击时更改一些状态，并将返回的 JSX 更改为取决于状态。

function Square({ value, setClickedNum }) {
  return (
    <button className="square" onClick={() => setClickedNum(value)}>
      {value}
    </button>
  );
}

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

function Game() {
  const [clickedNum, setClickedNum] = React.useState(-1);
  return (
    <div className="game">
      <div className="game-board">
        <h1>Number: {clickedNum === -1 ? 'Not clicked yet' : clickedNum}</h1>
        <Board {...{ setClickedNum }} />
      </div>
      <div className="game-info">
        <div>{/* status */}</div>
        <ol>{/* TODO */}</ol>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.querySelector('.react')).render(<Game />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>

【讨论】：