Question

我只想单击按钮时呈现不同的组件。

我不是在使用类，而是在使用功能性的反应挂钩。这不是一件完整的事情，而是一件事情，所以主要问题是使用相同的方法渲染新组件。

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或通过更改状态。请参阅此链接：how to move one component to another component on button click in react?

Answer 2

为什么需要一个路由器来显示组件，您可以设置一个变量，然后根据需要显示一个变量，如果您需要在单击按钮后显示组件。并且默认情况下，在路由器代码中，路由器是组件。请首先检查路由器概念。或者，如果您只想在链接，本地链接以及更多链接上使用路由器，则可以传递该值以显示组件。

您可以执行以下操作：

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

Answer 3

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

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

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

和内部return方法，请使用以下方法：

 <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：

最初将状态设置为false（例如isTrue是我们的变量）
在按钮上单击->在要调用的方法内（这里为handleClick），将状态设置为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

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

3 个答案: