React.JS：根据两次按钮点击在两个不同的 div 之间切换

Question

我对 React.JS 很陌生，正在尝试了解它。所以我的意图是这样的。 根据单击的按钮在两个不同的应用程序（计数器和随机）之间切换。

我只想根据单击的按钮在两个不同的 DIV 之间切换

计数器.JS

import { useState } from "react"
import './index.css';



function Counter(){

    var [count,setmyname] = useState(0);

    function Increment(){
        setmyname(count = count+1);
        console.log(count)
    }

    function Decrement(){
        setmyname(count = count-1);
        console.log(count)
    }
    function Reset(){
        setmyname(count = 0);
        console.log(count)
    }
    
    return(
        <div className="center">
           
            <div className="counter_app">
            <h1>Counter App</h1>
            <h1 className="count">{count}</h1>
            <div className="button_class">
            <button className="increment" onClick={Increment}>Increment</button>
            <button className="decrement" onClick={Decrement}>Decrement</button>
            <button className="reset" onClick={Reset}>Reset</button>
            </div>
            </div>

          
        </div>
    )
}

export default Counter`

随机.JS

function Random(){
   

    var [number,SetRandom] = useState(0);

    function GetRandom(){
        SetRandom(Math.floor(Math.random() *10));
        console.log(number);
    }
    return(
        <div className="random_center">
            <div className="random_app">
            <h1>Random App</h1>
            <button className="random" onClick={GetRandom}>Random</button>
            <p>{number}</p>
            </div>
        </div>
    )
}

export default Random

App.JS

import Counter from "./counter"
import { useState } from "react"
import Random from "./random"
import ReactDOM from "react-dom/client"

function App(){
   

  var [button,SetButton] = useState(1);

  function GetDiv(){
    
  }
 
  return(
    <div className="container">
    <button onClick={}>Counter App</button>
    <button onClick={}>Random App</button>
    
     
     
    </div>
  )
}

export default App

索引.JS

const root=ReactDOM.createRoot(document.getElementById("root"));

root.render(<App></App>
);

我添加了四个 JS 文件用于在按钮之间切换。我确信可能有更好的方法来做到这一点。我不知道如何在 React.JS 中进行 DOM 操作。让我知道该怎么做。非常感谢。

Answer 1

在 React 中，您不需要直接操作 DOM 在组件（如 Counter 和 Random）之间切换。相反，您可以使用状态来有条件地渲染组件。以下是您如何更新文件以实现所需的切换功能：

counter.js：

import { useState } from "react";
import './index.css';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div className="center">
      <div className="counter_app">
        <h1>Counter App</h1>
        <h1 className="count">{count}</h1>
        <div className="button_class">
          <button onClick={() => setCount(count + 1)}>Increment</button>
          <button onClick={() => setCount(count - 1)}>Decrement</button>
          <button onClick={() => setCount(0)}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default Counter;

随机.js：

import { useState } from "react";

function Random() {
  const [number, setRandom] = useState(0);

  return (
    <div className="random_center">
      <div className="random_app">
        <h1>Random App</h1>
        <button onClick={() => setRandom(Math.floor(Math.random() * 10))}>
          Generate Random Number
        </button>
        <p>{number}</p>
      </div>
    </div>
  );
}

export default Random;

app.js：

import Counter from "./counter";
import Random from "./random";
import { useState } from "react";

function App() {
  // State to track which component to show (1 for Counter, 2 for Random)
  const [currentApp, setCurrentApp] = useState(1);

  return (
    <div className="container">
      <button onClick={() => setCurrentApp(1)}>Counter App</button>
      <button onClick={() => setCurrentApp(2)}>Random App</button>
      
      {/* Conditionally render components based on the state */}
      {currentApp === 1 && <Counter />}
      {currentApp === 2 && <Random />}
    </div>
  );
}

export default App;

index.js：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import './index.css';

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

这种方法使用 React 的状态管理，消除了直接 DOM 操作的需要并确保高效的 UI 更新。它具有高度可扩展性，允许轻松集成其他组件，例如添加第三个按钮和组件。此外，代码仍然简单、可读且易于维护。