iis服务器助手广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >react怎么请求部分刷新
  • 509
分享到

react怎么请求部分刷新

刷新React 2023-05-14 21:05:02 509人浏览 八月长安
摘要

本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。react怎么请求部分刷新?React实现局部刷新【项目结构】流程: 入口文件 -> 路由 -> layout -> Analysi/M

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 '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" >
                {}
                <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 }}>
              {}
              {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怎么请求部分刷新的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: react怎么请求部分刷新

本文链接: https://www.lsjlt.com/news/206447.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • react怎么请求部分刷新
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react怎么请求部分刷新?React实现局部刷新【项目结构】流程: 入口文件 -> 路由 -> layout -> Analysi/M...
    99+
    2023-05-14
    刷新 React
  • react如何请求部分刷新
    本篇内容介绍了“react如何请求部分刷新”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!react请求部分刷新的实现方法:1、引入布局和子组...
    99+
    2023-07-04
  • nginx部署react刷新404怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。nginx部署react刷新404怎么办?nginx部署react应用,刷新路由报404nginx部署react单页应用时,如果跳转到某一个路由,然后刷新...
    99+
    2023-05-14
    React nginx
  • ListView中怎么实现部分刷新
    在ListView中实现部分刷新可以通过调用Adapter的notifyItemChanged()方法来实现。 首先,在你的Ad...
    99+
    2023-10-26
    ListView
  • jQuery怎么避免AJAX请求的页面刷新
    这篇“jQuery怎么避免AJAX请求的页面刷新”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“jQuery怎么避免AJAX请...
    99+
    2023-07-05
  • react怎么请求数据
    这篇文章主要介绍“react怎么请求数据”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react怎么请求数据”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • nginx部署react刷新404如何解决
    今天小编给大家分享一下nginx部署react刷新404如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。nginx部署...
    99+
    2023-07-04
  • react fetch怎么请求数据
    本教程操作环境:Windows10系统、react16版、Dell G3电脑。react fetch怎么请求数据?React Fetch请求最近需要用,所以学习一下1.fetch基于promise的ajax请求https://develop...
    99+
    2023-05-14
    fetch React
  • react怎么发送axios请求
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react怎么发送axios请求?React中使用axios发送请求的常用方法React中安装并引入axios依赖在React项目中使用axios请求,首...
    99+
    2023-05-14
    React
  • ajax如何实现异步请求刷新
    这篇文章给大家分享的是有关ajax如何实现异步请求刷新的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在网站刷新的方法中,ajax刷新是一种用户体验良好的刷新方式,在结合ssh等流...
    99+
    2024-04-02
  • react 不自动刷新怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react 不自动刷新怎么办?react项目,修改文件保存后,页面不会自动刷新解决方案:在package.json同级根目录下创建 .env文件写入:FA...
    99+
    2023-05-14
    React
  • react怎么请求数据异步
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react怎么请求数据异步?react异步请求数据方法。关于react异步请求数据有很多种方案。1、saga (用了er6生成器函数)2、promise3...
    99+
    2023-05-14
    React
  • React 中怎么请求远程数据
    本篇文章给大家分享的是有关React 中怎么请求远程数据,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。方式1:内联这是最简单,最直接的选择。在...
    99+
    2024-04-02
  • react axios请求拦截怎么实现
    本教程操作环境:Windows7系统、react17.0.1版、Dell G3电脑。react axios请求拦截怎么实现react 封装axios请求拦截、响应拦截、封装post、get请求默认你已经创建好了一个react项目首先我们需要...
    99+
    2022-11-22
    axios React
  • react刷新找不到页面怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react刷新找不到页面怎么办?react部署完以后,刷新页面会报错找不到视图今天上午部署完项目以后点击路由都可以跳转,但是在相应的路由刷新的时候却报错了...
    99+
    2023-05-14
    React
  • thinkphp下部分内容的ajax无刷新分页怎么办
    这篇文章主要介绍了thinkphp下部分内容的ajax无刷新分页怎么办的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇thinkphp下部分内容的ajax无刷新分页怎么办文章都会有所收获,下面我们一起来看看吧。t...
    99+
    2023-06-29
  • react路由页面不刷新怎么办
    本教程操作环境:Windows10系统、react-router v5版、Dell G3电脑。react路由页面不刷新怎么办react-router5 路由跳转页面不刷新问题原因 1. index.js文件中查看App组件是否被包裹在<...
    99+
    2023-05-14
    React
  • jQuery中ajax请求struts action实现异步刷新的示例分析
    小编给大家分享一下jQuery中ajax请求struts action实现异步刷新的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!第一步:导入相关jar包,本样例需导入struts...
    99+
    2024-04-02
  • react后端请求数据怎么实现
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react后端请求数据怎么实现?react-ajax请求后台数据方法react-ajaxaxios方法一:在package.json中配置 "p...
    99+
    2023-05-14
    React
  • react异步请求数据怎么实现
    在React中实现异步请求数据有多种方式,以下是其中几种常用的方法:1. 使用`fetch` API:`fetch`是现代浏览器提供...
    99+
    2023-09-13
    react
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作