首页  >  文章  >  web前端  >  react怎么请求部分刷新

react怎么请求部分刷新

藏色散人
藏色散人原创
2022-12-30 13:46:262523浏览

react请求部分刷新的实现方法:1、引入布局和子组件;2、分配路由,代码如“const BasicRoute = () => (...)”;3、定义项目的link;4、用“BasicLayout”标签包裹,将内容传到“layout.js”的“this.props.children”部分即可。

react怎么请求部分刷新

本教程操作环境: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 &#39;react&#39;;
import  {Layout ,Menu,Icon} from &#39;antd&#39;;
import { Router, Route, Link,HashRouter } from &#39;react-router-dom&#39;
import &#39;antd/dist/antd.min.css&#39;
import BasicRoute from &#39;../routes/router&#39;;

const { Header, Footer, Sider, Content } = Layout;

export default class BasicLayout extends Component {
  render() {
    return (
        <Layout>
        <Sider width={256} style={{ minHeight: &#39;100vh&#39;, color: &#39;white&#39; }}>
            
            <Menu theme="dark" mode="inline" >
                {/*定义了项目的link,会按照路由走*/}
                <Menu.Item><Link to="/Analysis">Item1</Link></Menu.Item>
            </Menu>
            
        </Sider>
        <Layout >
          <Header style={{ background: &#39;#fff&#39;, textAlign: &#39;center&#39;, padding: 0 }}>Header</Header>
          <Content style={{ margin: &#39;24px 16px 0&#39; }}>
            <div style={{ padding: 24, background: &#39;#fff&#39;, minHeight: 360 }}>
              {/*Analysis.js文件引用了BasicLayout,并把自己的全部子节点(子组件)传过来*/}
              {this.props.children}
              
            </div>
          </Content>
          <Footer style={{ textAlign: &#39;center&#39; }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    )
  }
}

3.子组件(Analysis.js) (出错点

import React from &#39;react&#39;;
import BasicLayout from &#39;../layout/layout&#39;;
export default () => {    //用BasicLayout标签包裹,内容传到layout.js的this.props.children部分
       return (<BasicLayout><h1>Analysis Page</h1></BasicLayout>)
}

【效果】

【总结】

按照antd官网的教程走了一遍,发现不能局部刷新

原因在于官网用了umi框架。我是自己配置,有很多遗漏,导致子组件没有正确的传递到layout中。

推荐学习:《react视频教程

以上是react怎么请求部分刷新的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn