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

Question

我是 React 的新手，正在创建 Tic-Tac-Toe 游戏。我想创建一个包含三个选项的起始页：

开始
规则
退出

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

Screenshot-Start Page

Screenshot-Main Game

My Tic-Tac-Toe Repo

Answer 1

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

并将您的按钮用作 Link 或在您的 onClick 函数中使用 useHistory 挂钩

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

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

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

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

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

How can I render different component using onClick() function in React?

javascript

onclick

buttonclick

reactjs

conditional-rendering