个人中心
gpt4 book ai didi

javascript - 如何在reactjs中的一个根中使用n个模型？

转载 作者：行者123 更新时间：2023-12-02 23:34:37 25 4
gpt4 key购买 nike

嗨，我有一个像这样的代码的根

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<button >Platform</button>
<button >Game</button>
<button >Score</button>
<hr />

<div id="root"></div>

index.js代码

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';


ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

app.js 代码

    import React ,{Component} from 'react';
import axios from 'axios';
import { Modal,ModalHeader,ModalBody,ModalFooter,FormGroup,Label,Input,Table ,Button} from 'reactstrap';


class App extends Component{
  state={
    books:[],
    NewBookData:{
      Title:'',
      Rating:''
    },
    EditBookData:{
      Id:'',
      Title:'',
      Rating:''
    },

    NewBookModal:false,
    EditBookModal:false
  }
....

这个根对于默认作业来说是可以的，但是我想在平台，游戏，...上 ovveride 这个根我怎样才能做到这一点？

最佳答案

您必须像这样的代码一样使用 Route

1.在组件文件夹中为 Platform、game、score...创建 3 个 js 文件，如下代码

import React,{Component} from 'react';
class Game extends Component {
    render(){
    return (
     <h1>this is game page</h1> 
    );
    }
  }
  export default Game;

2.将此代码导入到app.js

import React,{Component} from 'react';
import {BrowserRouter as Router,NavLink} from 'react-router-dom';
import Route from 'react-router-dom/Route';
import gamePage from './Component/game';
import platformPage from './Component/platform';
import scorePage from './Component/score';

3.使用Route发送给模型

  <Router>
<div className="App">
  <ul>
    <li>
  <NavLink to="/platform" exact activeStyle={{color:'violet'}}>Platform</NavLink>
  </li>
  <li>
  <NavLink to="/game" exact activeStyle={{color:'violet'}}>Game</NavLink>
  </li>
  <li>
  <NavLink to="/score" exact activeStyle={{color:'violet'}}>Score</NavLink>
  </li>
  </ul>
  <Route path="/platform" exact strict component={platformPage}/>

  <Route path="/game" exact strict component={gamePage}/>

  <Route path="/score" exact strict component={scorePage}  /> 

</div>
</Router>

关于javascript - 如何在reactjs中的一个根中使用n个模型？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56331535/

25 4 0
文章推荐： javascript - 禁止 JavaScript POST 到 URL
文章推荐： vba - If 语句中的 InStr
文章推荐： vba - 添加前导 '0' 进行格式化直至 5 位数字值
文章推荐： javascript - 如何设置 Vue 路由或覆盖后退按钮以像应用程序一样运行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com