我是 React 的新手，我正在創建一個井字游戲。我想創建一個包含三個選項的起始頁面：
- 開始
- 規則
- 出口
單擊開始按鈕時，我想渲染包含原始游戲的組件。單擊規則時，我想呈現一個顯示規則的頁面。我為三個按鈕以及游戲本身創建了單獨的組件。
截圖-起始頁
截圖-主游戲
我的井字游戲回購
uj5u.com熱心網友回復：
要重定向到包含您的組件之一的新頁面，您可以使用 react router ：https : //v5.reactrouter.com/web/guides/quick-start
并使用您的按鈕作為鏈接或在您的 onClick 函式中使用 useHistory 鉤子
如果您只想在單擊按鈕時在當前頁面上呈現組件，您可以簡單地使用具有如下狀態的條件：
...
const [isStart, setIsStart] = useState(false)
...
<Button onClick={() => setIsStart(true)}>Start</Button>
...
{isStart ? <Start> : null </Start>}
uj5u.com熱心網友回復：
您必須使用React Router負責在不同 url 路徑上顯示不同組件的 a，例如：
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import LandingPage from './landing-page/LandingPage';
import Details from './details/Details';
const Router = () => {
return (
<React.Fragment>
<Switch>
<Route path={`/`} exact render={() => <LandingPage />} />
<Route path={`/details`} exact render={() => <Details />} />
</Switch>
</React.Fragment>
);
};
export default Router;
然后在單擊時重定向到這些路徑：
handleClick = (e) => {
e.preventDefault();
history.push('/results');
}
return (
<Button onClick={handleClick}>Results</Button>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/349425.html
標籤：javascript 反应 点击 按钮点击 条件渲染