如何在 React 中使用 onClick() 函数渲染不同的组件？

Posted 2023-02-22

【中文标题】如何在 React 中使用 onClick() 函数渲染不同的组件？

【英文标题】：How can I render different component using onClick() function in React?

【发布时间】：2021-12-19 20:13:54

【问题描述】：

我是 React 和创建井字游戏的新手。我想创建一个包含三个选项的起始页面：

开始 规则 退出

单击开始按钮时，我想渲染包含原始游戏的组件。单击规则时，我想呈现一个显示规则的页面。我为三个按钮以及游戏本身创建了单独的组件。

Screenshot-Start Page

Screenshot-Main Game

My Tic-Tac-Toe Repo

【参考方案1】：

要重定向到包含您的组件之一的新页面，您可以使用 react router ： https://v5.reactrouter.com/web/guides/quick-start

并将您的按钮用作链接或在 onClick 函数中使用 useHistory 钩子

如果您只想在单击按钮时在当前页面上呈现组件，您可以简单地使用具有如下状态的条件：

...
const [isStart, setIsStart] = useState(false)

...
isStart ? <Start> : <Button onClick=() => setIsStart(true)>Start</Button>

【讨论】：

感谢您清除我的查询。这似乎可行，但我想要的是，每当我单击开始按钮时，我都希望开始按钮消失，并且在屏幕上呈现所需的组件。

好吧，我做了一些修改，告诉我它是否适合你

谢谢.. 我使用 if-else 并让它工作..

【参考方案2】：

你必须使用React Router，它负责在不同的url路径上显示不同的组件，例如：

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>
);