我对 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 操作。让我知道如何做。非常感谢。
我相信你的 Index.Js 没问题。
要在两者之间切换,您可以在 App.js 中使用 React 的状态(https://react.dev/reference/react/useState),正如您所猜测的那样,但是您没有正确使用它:
使用 React 条件渲染,你可以让你想要的渲染显示出来