本教程操作环境：windows10系统、react18.0.0版、dell g3电脑。
react怎么请求部分刷新？
react实现局部刷新
【项目结构】
流程： 入口文件 -> 路由 -> 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;
2.布局部分（重点）
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" > {/*定义了项目的link，会按照路由走*/} <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，并把自己的全部子节点(子组件)传过来*/} {this.props.children} </div> </content> <footer style={{ textalign: 'center' }}>ant design ©2018 created by ant ued</footer> </layout> </layout> ) }}
3.子组件（analysis.js） （出错点）
import react from 'react';import basiclayout from '../layout/layout';export default () => { //用basiclayout标签包裹，内容传到layout.js的this.props.children部分 return (<basiclayout><h1>analysis page</h1></basiclayout>)}
【效果】
【总结】
按照antd官网的教程走了一遍，发现不能局部刷新
原因在于官网用了umi框架。我是自己配置，有很多遗漏，导致子组件没有正确的传递到layout中。
推荐学习：《react视频教程》
以上就是react怎么请求部分刷新的详细内容。