单击按钮时显示不同的组件

Question

我只想在单击按钮时渲染不同的组件。

我没有使用类，而是使用函数式的React Hooks。这不是一整件事，而是其中的一部分，所以主要问题是使用相同的方法渲染新组件。

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import "./App.css";
import { Second } from "./components/secondpage";
function App() {
const handleClick = () => {
// I tried using html in place or returning component but nothing happpened
return <Second />;
};
return (
<div className="App">
<div>
<h1>Create Account</h1>
<button onClick={handleClick}>Submit</button>
</div>
</div>
);
}
//this is in second.js
export const Second = () => {
return (
<div>
<h1>welcome to second page</h1>
</div>
);
};
// I tried using this but nothing worked
ReactDOM.render(
<Router>
<Route path="/" component={Second} />
</Router>
);
export default App;

Answer 1

您可以在路由的帮助下完成此操作，请参阅此链接：https://codeburst.io/getting-started-with-react-router-5c978f70df91或者通过改变状态。请参阅此链接：如何在按钮点击反应中将一个组件移动到另一个组件？

Answer 2

单击按钮时，可以使用React Router或Conditional Rendering调用不同的组件。

下面是一个使用router的示例，请确保首先安装react-router-dom并导入必需品：

import {BrowserRouter as Router,Switch,Route,Link} from "react-router-dom";

和内部返回方法，使用此：

<Router>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/users">Users</Link></li>
</ul>
</nav>
<Switch>
<Route path="/about"> <About /> </Route>
<Route path="/users"> <Users /> </Route>
<Route path="/"> <Home /> </Route>
</Switch>
</div>
</Router>

使用Conditional Rendering和使用states:

1. 最初将状态设置为false(假设isTrue是我们的变量(
2. 在您将要调用的方法(此处为handleClick(内的Button Click->上，将state设置为true

现在返回方法：

<div>
{
this.state.isTrue ?
<div> <YourComponent /> </div>:
<div>  
<h1>Create Account</h1>
<button onClick={handleClick}>Submit</button>
</div>
}
</div>

基于类似的想法，检查这些：

https://reacttraining.com/react-router/web/guides/quick-start

https://reactjs.org/docs/hooks-state.html

https://reactjs.org/docs/conditional-rendering.html

Answer 3

为什么你需要一个路由器来显示组件？如果你需要在点击按钮后显示组件，你可以设置一个变量，然后在此基础上显示。并且在路由器代码中，默认情况下路由器是组件。请先检查路由器的概念。或者，如果您只想在链路、本机链路等上使用路由器，则可以传递值以显示组件。

你可以这样做：

import React, { useState } from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
NavLink
} from 'react-router-dom';
import './App.css';
import { Second } from './components/secondpage';
export default () => {
return (
<Router>
<nav className="navbar  ">
<div className=" navbar-collapse"  >
<ul className="navbar-nav">
<li className="nav-item">
<NavLink to="/second">second</NavLink>
</li>
</ul>
</div>
</nav>
<Switch>
<Route
path="/second"
exact
render={() => {
return (
<div>
<h1>welcome to second page</h1>
</div>
);
}}
/>
or
<Route path="/second" component={Second} />
</Switch>
</Router>
);
};