站長資訊網(wǎng)
react請求部分刷新的實(shí)現(xiàn)方法：1、引入布局和子組件；2、分配路由，代碼如“const BasicRoute = () => (…)”；3、定義項(xiàng)目的link；4、用“BasicLayout”標(biāo)簽包裹，將內(nèi)容傳到“l(fā)ayout.js”的“this.props.children”部分即可。
本教程操作環(huán)境：Windows10系統(tǒng)、react18.0.0版、Dell G3電腦。
react怎么請求部分刷新？
React實(shí)現(xiàn)局部刷新
【項(xiàng)目結(jié)構(gòu)】
流程： 入口文件 -> 路由 -> layout -> Analysi/Monitor/Workspace
1.入口文件 -> src/index.js
2.組件 -> src/coms
3.布局 -> src/layout
4.路由 -> src/routes
【流程解析】
流程： 入口文件 -> 路由 -> layout -> Analysi/Monitor/Workspace
1.路由部分
//import React from 'react'; 引入類 //import { Component } from 'react'; 引入對象 import React, { Component } from 'react'; import {HashRouter, Route, Switch} from 'react-router-dom'; //引入布局和子組件 import BasicLayout from '../layout/layout'; import Analysis from '../coms/Analysis'; import Monitor from '../coms/Monitor'; import Workplace from '../coms/Workplace'; //分配路由 const BasicRoute = () => ( <HashRouter> <Switch> <Route exact path="/" component={BasicLayout}/> <Route exact path="/Analysis" component={Analysis}/> <Route path="/Monitor" component={Monitor}/> <Route path="/Workplace" component={Workplace}/> </Switch> </HashRouter> ); export default BasicRoute;
登錄后復(fù)制
2.布局部分（重點(diǎn)）
import React, { Component } from 'react'; import {Layout ,Menu,Icon} from 'antd'; import { Router, Route, Link,HashRouter } from 'react-router-dom' import 'antd/dist/antd.min.css' import BasicRoute from '../routes/router'; const { Header, Footer, Sider, Content } = Layout; export default class BasicLayout extends Component { render() { return ( <Layout> <Sider width={256} style={{ minHeight: '100vh', color: 'white' }}> <Menu theme="dark" mode="inline" > {/*定義了項(xiàng)目的link，會(huì)按照路由走*/} <Menu.Item><Link to="/Analysis">Item1</Link></Menu.Item> </Menu> </Sider> <Layout > <Header style={{ background: '#fff', textAlign: 'center', padding: 0 }}>Header</Header> <Content style={{ margin: '24px 16px 0' }}> <div style={{ padding: 24, background: '#fff', minHeight: 360 }}> {/*Analysis.js文件引用了BasicLayout，并把自己的全部子節(jié)點(diǎn)(子組件)傳過來*/} {this.props.children} </div> </Content> <Footer style={{ textAlign: 'center' }}>Ant Design ?2018 Created by Ant UED</Footer> </Layout> </Layout> ) } }
登錄后復(fù)制
3.子組件（Analysis.js） （出錯(cuò)點(diǎn)）
import React from 'react'; import BasicLayout from '../layout/layout'; export default () => { //用BasicLayout標(biāo)簽包裹，內(nèi)容傳到layout.js的this.props.children部分 return (<BasicLayout><h1>Analysis Page</h1></BasicLayout>) }
登錄后復(fù)制
【效果】
【總結(jié)】
按照antd官網(wǎng)的教程走了一遍，發(fā)現(xiàn)不能局部刷新
原因在于官網(wǎng)用了umi框架。我是自己配置，有很多遺漏，導(dǎo)致子組件沒有正確的傳遞到layout中。
推薦學(xué)習(xí)：《react視頻教程》
