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

Question

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

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

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

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

App.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;

Explore.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>)

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

REACT: How do i change the rendered JSX on my test site?

javascript

jsx

reactjs