反应：如何在我的测试站点上更改呈现的 JSX？

Question

我正在尝试学习 React，目前我正在使用我的个人网站进行测试。

问题是我真的不知道如何让我的网站呈现一个新的 JSX。 在纯 HTML 中，我只使用按钮上的链接，然后将其链接到我的第二个 HTML 文件。 我正在尝试使用 this.setState 和 handleClick() 来执行此操作。 我将发布相关代码。

有人可以解释一下或者给我一个解决方案吗？ 我整天都被困在这上面！

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Explore from './Components/Explore';
import './index.css';
import reportWebVitals from './reportWebVitals';


export class Home extends React.Component {
  constructor(props) {
    super(props);
    this.handleCick = this.handleCick.bind(this);
    this.state = { page: <App onClick={this.handleClick}/> }
  }
  handleCick() {
    this.setState({ page: <Explore /> })
  }
  render () {
    return this.state.page
  }
}




 const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Home />
  </React.StrictMode>
);

应用程序.js

import React from 'react';
import './App.css';

class App extends React.Component {
  render () {
    return (
      <div className="App">
        <header className="App-header">
          <div className="pb" alt="Profile picture"></div>
          <h1>Magnus Pladsen</h1>
          <h2>Junior Developer</h2>
          <div className="icons">
            <a href=""><div className="icon facebook"></div></a>
            <a href="" target="_blank"><div className="icon linkedin"></div></a>
            <a href="" target="_blank"><div className="icon github"></div></a>
          </div>
            <button onClick={this.props.onClick}>Explore</button>
        </header>
      </div>
    );
  }
}


export default App;

探索.js

import React from 'react';
import './Explore.css';



class Explore extends React.Component {
    render() {
        return (
            <div className="Explore">
              <header className="Explore-header">
                <div className="pb" alt="Profile picture"></div>
                <h1>TEST</h1>
                <h2>THIS CODE WILL CHANGE WHEN I GET IT TO RENDER</h2>
                <div className="icons">
                  <a href="" target="_blank"><div className="icon facebook"></div></a>
                  <a href="" target="_blank"><div className="icon linkedin"></div></a>
                  <a href="" target="_blank"><div className="icon github"></div></a>
                </div>
              </header>
            </div>
        );
    }
}

export default Explore;

Answer 1

你在 React 中以错误的方式处理这个问题。 你有几个选择。

我强烈推荐看看React Router

这是迄今为止最好的解决方案，您将在App.js组件中获得类似于以下的代码。

作为一个基本示例，这些文档很容易理解。

import React from 'react'
import { HashRouter as Router, Route, Switch } from 'react-router-dom'

// import pages
import Home from './pages/Home'
import Explore from './pages/explore'

function App() {
  return (
   <Router>
     <Switch>
       <Route exact path = "/">
         <Home />
       </Route>
       <Route path = "/explore">
         <About />
       </Route>
     </Switch>
   </Router>
  )
}

export default App; 

您还可以使用useHistory() ，它也有易于理解的示例。

如果你只是在玩，也可以选择老式的香草 JS。

window.open(<yourpage>)