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

【问题标题】：How can I render different component using onClick() function in React?如何在 React 中使用 onClick() 函数渲染不同的组件？
【发布时间】：2021-12-19 20:13:54
【问题描述】：

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

开始
规则
退出

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

Screenshot-Start Page

Screenshot-Main Game

My Tic-Tac-Toe Repo

【问题讨论】：

标签： javascript reactjs onclick buttonclick conditional-rendering

【解决方案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>
);

【讨论】：