反應：如何在我的測驗站點上更改呈現的JSX？

我正在嘗試學習 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;

uj5u.com熱心網友回復：

你在 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>)

標籤：javascript 反应 jsx

上一篇：將負數陣列轉換為正數陣列

下一篇：無法使用appendChildtextNode覆寫url鏈接文本