主页 / user-27298431

Nisha Shajahan's questions

Martin Hope
Nisha Shajahan
Asked: 2024-11-17 00:36:45 +0800 CST
  • 5

我对 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

应用.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 操作。让我知道如何做。非常感谢。

html