react页面加载时出现闪屏

问下有人遇到过react页面加载会先出现内容然后再加载样式的问题吗

1个回答

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
页面加载时的Ajax $ .post - React

<div class="post-text" itemprop="text"> <p>I want to post data via <code>$.post</code> in ReactJS and use it in an api made to retrieve data from a database with some criteria like publisher_id. What I am trying to do is take the publisher_id from a special class called User and then post it via my React app into the api files. I stumbled upon a problem which is I can only use $.post when sending data to the server via a form with, usually, a <code>onSave</code> function. I am fully aware of how that works but my question is: </p> <p>Is there a way to send data with <code>$.post</code> or anything right when the rendering process starts?</p> <p>I have tried using <code>componentWillMount</code> for that matter but I stumbled upon another issue. I have noticed that usually, for <code>$.post</code> to work, an event must be triggered. </p> <p>What kind of event should I use to do what I want?</p> <p><strong>Code</strong></p> <p>For the <code>$.get</code> method I use the following which works just fine:</p> <pre><code>componentDidMount: function () { this.serverRequest = $.get("get_user_id.php", function (publisher_id) { this.setState( { publisher_id: JSON.parse(publisher_id) }); }.bind(this)); } </code></pre> <p>What I need to do for my api to work is right after this retrieving of data happens, to post <code>publisher_id</code> into <code>read.php</code>, file responsable for retrieving only specific data from the database.</p> <p>EDIT:</p> <p>What I have tried doing is the following:</p> <pre><code>componentDidMount: function () { //previous code this.serverRequest = $.post("read_all_products.php", { publisher_id: this.state.publisher_id, }) } </code></pre> <p>As mentioned before, the retrieve of data fully works since when later in the render function trying to display it with {this.state.publisher_id} it will correctly show up. What doesn't work is the post of data. I may not be fully aware of how I am supposed to do it since , again, I am trying to send it on page load.</p> <p>EDIT2: I have also tried passing publisher_id as a prop from the main component, so the $.get method now happens there. Then I did the following:</p> <pre><code>componentWillMount: function () { this.serverRequest = $.post("read_all_products.php", { publisher_id: this.props.publisher_id, }); }, componentDidMount: function () { this.serverRequest = $.get("read_all_products.php", function (products) { this.setState({ products: JSON.parse(products) }); }.bind(this)); } </code></pre> <p>That didn't work and I tried sending a <em>fake</em> form using an onSave function: </p> <pre><code> onSave: function (e) { $.post("read_all_products.php", { publisher_id: this.props.publisher_id, }); e.preventDefault(); }// used after this in the render method on a form with a button, both //have onSubmit and onClick set to {this.onSave} </code></pre> <p>I still look forward to somebody's help. I am pretty much stuck and have been for the past few days. I need to get this to work or I either need to change the authentication or keep being stuck on this.</p> <p>The question is: How do I use $.post , in React, to send a prop called publisher_id to my .php api file on page load or even, say if anything else isn't possible, by making a button that sends the data with an empty form that presses itself once before the componentDidMount, probably in componentWillMount?</p> </div>

React 生成的网页跳转到其它页面再返回时React 生成的页面重新加载了

React 做的搜索页面A,搜索出条目,点击跳转到详情B,再返回A后,React搜索的结果没有保持。刷新成刚打开A时的内容。

React中引用组件的时候在加载页面时组件样式变化很大

在React中js页面上加载组件的时候组件的样式会脱离Panel超出限定

react中组件加载后变更ajax值,怎么让它重新加载,我设置setState没反应???

react中componentDidMount方法中添加ajax,现在我变更ajax的url值,怎么让它重新加载,我设置setState没反应??? 代码截图如下: 我要实现初始状态url值为https://unsplash.com/,然后点击搜索键,获取input值,更改url值,使代码重新加载,不知道该怎么实现 ![图片说明](https://img-ask.csdn.net/upload/201811/09/1541771989_752369.jpg)

react-router 组件加载的问题

正在学习react,使用侧边栏的时候,主页面无法使用Router加载,是代码哪里出错了? ``` <div style={{padding: 24, background: '#fff', minHeight: 360}}> {RouteMap.map(route => ( <Route exact key={route.key} path={route.link} component={route.component} /> ) )} </div> ``` 如下图,如果加载正确的话,右边应该是能显示表格才对<br/> ![图片说明](https://img-ask.csdn.net/upload/201903/05/1551779018_181657.png) 相关的完整代码:<br/> App.js ``` import React from 'react'; import {Breadcrumb, Icon, Layout, Menu} from 'antd'; import 'antd/dist/antd.css'; import '../css/App.css'; import {BrowserRouter, Link, Route} from 'react-router-dom' import SidebarData from './sidebarData'; import {Switch} from "react-router"; const { Header, Content, Footer, Sider, } = Layout; const MenuContent = SidebarData.map(item => ( item.children === "-1" ? ( <Menu.Item key={item.key}> <Link to={item.link}> <Icon type={item.icon}/><span>{item.text}</span> </Link> </Menu.Item> ) : ( <Menu.SubMenu key={item.key} title={<span><Icon type={item.icon}/> <span>{item.text}</span></span>}> {item.children.map(childItem => ( <Menu.Item key={childItem.key}> <Link to={childItem.link}>{childItem.text}</Link> </Menu.Item> ))} </Menu.SubMenu> ) ) ); const RouteMap = []; SidebarData.map(item => { if (item.children === "-1") { RouteMap.push({ key: item.key, text: item.text, link: item.link, component: item.component }); } else { item.children.map(childItem => { RouteMap.push({ key: childItem.key, text: childItem.text, link: childItem.link, component: childItem.component }); }); } }); class App extends React.Component { state = { collapsed: false, }; onCollapse = (collapsed) => { console.log(collapsed); this.setState({collapsed}); } handleClick = (e) => { RouteMap.map(item => { if (item.key === e.key) { this.setState({curKey: item.key}); this.setState({curText: item.text}); this.setState({curLink: item.link}); this.setState({curComponent: item.component}); } }); } render() { return ( <BrowserRouter> <Layout style={{minHeight: '100vh'}}> <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse} > <div className="logo"/> <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" onClick={this.handleClick} selectedKeys={[this.state.curKey]} > {MenuContent} </Menu> </Sider> <Layout> <Header style={{background: '#fff', padding: 0}}> {this.state.curText} </Header> <Content style={{margin: '0 16px'}}> <Breadcrumb style={{margin: '16px 0'}}> <Breadcrumb.Item>用户</Breadcrumb.Item> <Breadcrumb.Item>Bill</Breadcrumb.Item> </Breadcrumb> <div style={{padding: 24, background: '#fff', minHeight: 360}}> {/*<Orderb2c/>*/} {/*<Switch>*/} {RouteMap.map(route => ( <Route exact key={route.key} path={route.link} component={route.component} /> ) )} {/*</Switch>*/} </div> </Content> <Footer style={{textAlign: 'center'}}> ©2019 Created by Ant UED </Footer> </Layout> </Layout> </BrowserRouter> ); } } export default App; ``` SidebarData.js ``` import Orderb2c from './orderb2c'; import Orderb2b from "./orderb2b"; import Userlist from "./userlist"; import Userauthority from "./userauthority"; import Userinfo from "./userinfo"; import Mainpage from "./mainpage"; const SidebarData = [ { key: 'main_page', text: '主页', icon: 'desktop', link: './mainpage', component: Mainpage, children: '-1' }, { key: 'user', text: '用户', icon: 'user', children: [{ key: 'user_list', text: '用户列表', link: './userlist', component: Userlist }, { key: 'user_authority', text: '用户权限', link: './userauthority', component: Userauthority }, { key: 'user_info', text: '用户信息', link: './userinfo', component: Userinfo }] }, { key: 'order', text: '订单', icon: 'file', children: [{ key: 'order_b2c', text: 'B2C订单', link: './orderb2c', component: Orderb2c }, { key: 'order_b2b', text: 'B2B订单', link: './orderb2b', component: Orderb2b }] } ]; export default SidebarData; ```

react通过dangerouslySetInnerHTML加载html,html中写的js方法无效

react通过dangerouslySetInnerHTML加载html,html中写的js方法无效

页面加载完之后为什么自动执行点击事件?

![图片说明](https://img-ask.csdn.net/upload/201804/11/1523445369_564409.png) 页面自动执行点击事件,执行后台方法,然后再点击的时候,不调用后台方法了,直接跳到首页,为什么? ![图片说明](https://img-ask.csdn.net/upload/201804/11/1523445651_324231.png)

React native 加载并处理网络数据显示在listView的实例

最近在看React native 对网络加载数据显示在listView的例子不太理解,不知道如何操作 网络数据,有没有像Android中创建Bean类处理数据的方法,有大神有实例么?给个例子.

在页面加载时没有后端提供Cookie的前端身份验证?

<div class="post-text" itemprop="text"> <p>Is there any way a front-end tool like <a href="https://facebook.github.io/react/" rel="nofollow">React</a> can be used effectively to authenticate users without a backend serving cookies on page load?</p> </div>

A页面和B页面,A页面打开后加载B页面,B页面加载完后显示B页面,关闭A页面

现在往服务器分别打包2个页面,A页面和B页面。 先进入的是A页面,在A页面中,调B页面,并且等B页面全部加载完后,A页面关闭,当前显示B页面。 那位大神知道这个怎么弄?

ajax请求成功后返回的数据是个页面,怎么渲染出这个页面?react写的项目,做支付接口。

ajax请求成功后返回的数据是个页面,怎么渲染出这个页面?react写的项目,做支付接口。

react 滚动分页列表点击进入详细,然后点击回退按钮,怎么能使回来的页面保持离开前的位置和状态?

问题描述 在(A)页面原来的列表页面向下滚动滚动到第二页,点击列表 ``` <Link to="xxx"/> ``` 跳转到详细(B)页面,在(B)页面点击返回按钮执行`this.props.history.goBack() `返回到想一个页面,无法回显到(A)页面的位置和数据。 问题分析:`this.props.history.goBack()`返回之前的页面会重新调用组件渲染流程,这个和浏览器原生的`window.history.back(-1)`不一样。 期待的结果 目前react 有没有出插件可以模拟`window.history.back(-1)`的返回 或者解决方案 ?

react写到独立的.js文件中,在html中调用无效,页面没有反应

react写到独立的.js文件中,在html中调用无效,页面没有反应 **index.html** <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel" src="helloworld_react.js"></script> </body> </html> **helloworld_react.js** ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );

小白求教,在哪里更改react项目的首页,就是一运行项目就打开的页面

如题,如何更改在react项目运行时就打开的登录页,新手小白,最近在搭建react-redux项目,对react项目不是很熟

React页面中使用fetch请求数据相关异常问题,新人求解答

最近学习React做一个简单的Demo,里面需要通过访问Web接口获取数据,看别人使用fetch挺简单的,于是就引入了,但是却遇到了问题。。。起初,直接使用fetch(url)去做,运行直接报异常:No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8000’ is therefore not allowed access。goggle了一下,应该是跨域问题,有人给出解答,把请求request的mode设置为"no-cors",试了一下,跨域问题好像是解决了,在控制台里看到请求也正常返回了(含有body数据) ![图片说明](https://img-ask.csdn.net/upload/201708/10/1502341388_551416.png) ![图片说明](https://img-ask.csdn.net/upload/201708/10/1502341406_116300.png) 但是始终获取不到响应reponse里面的数据,可是数据明明就在那,而且报出的异常我很困惑: ![图片说明](https://img-ask.csdn.net/upload/201708/10/1502341445_264760.png) ![图片说明](https://img-ask.csdn.net/upload/201708/10/1502341460_726978.png) 求解答 谢谢~ PS: Demo跑在本地8000端口上

react native 跳转子页面 二级自页面在一级自页面的下面没有覆盖一级子页面

![图片说明](https://img-ask.csdn.net/upload/201903/04/1551691886_650924.png) 怎么解决呀

react相关问题,如何在多个html页面使用index.js?以及其他的js

我是用create-react-app创建的react项目,然后使用了npm run eject将配置文件拽了出来,现在是在默认的public/index.html和src/index.js上写的项目,想请教一下,如何在public中的多个html中使用index.js,或者其他自己编写的js?

react实现简单的登录页面,我是react小白

才接触react,想做一个简单的登录页面,但是总是不对,有哪位大神帮忙写一个demo页,给一个类似的demo也行

React Native 安卓image 加载网络图片,有时能显示,有时不能显示

<Image style={{height: 388,width: 281}} source = {{uri:this.props.ActivityInfo.picUrl}} resizeMode='cover' resizeMethod='auto' />

C/C++学习指南全套教程

C/C++学习的全套教程,从基本语法,基本原理,到界面开发、网络开发、Linux开发、安全算法,应用尽用。由毕业于清华大学的业内人士执课,为C/C++编程爱好者的教程。

定量遥感中文版 梁顺林著 范闻捷译

这是梁顺林的定量遥感的中文版,由范闻捷等翻译的,是电子版PDF,解决了大家看英文费时费事的问题,希望大家下载看看,一定会有帮助的

YOLOv3目标检测实战:训练自己的数据集

YOLOv3是一种基于深度学习的端到端实时目标检测方法,以速度快见长。本课程将手把手地教大家使用labelImg标注和使用YOLOv3训练自己的数据集。课程分为三个小项目:足球目标检测(单目标检测)、梅西目标检测(单目标检测)、足球和梅西同时目标检测(两目标检测)。 本课程的YOLOv3使用Darknet,在Ubuntu系统上做项目演示。包括:安装Darknet、给自己的数据集打标签、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计(mAP计算和画出PR曲线)和先验框聚类。 Darknet是使用C语言实现的轻型开源深度学习框架,依赖少,可移植性好,值得深入探究。 除本课程《YOLOv3目标检测实战:训练自己的数据集》外,本人推出了有关YOLOv3目标检测的系列课程,请持续关注该系列的其它课程视频,包括: 《YOLOv3目标检测实战:交通标志识别》 《YOLOv3目标检测:原理与源码解析》 《YOLOv3目标检测:网络模型改进方法》 敬请关注并选择学习!

sql语句 异常 Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your

在我们开发的工程中,有时候会报 [Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ------ 这种异常 不用多想,肯定是我们的sql语句出现问题,下面...

浪潮集团 往年的软件类 笔试题 比较详细的哦

浪潮集团 往年的软件类 笔试题 比较详细的哦

2019 AI开发者大会

2019 AI开发者大会(AI ProCon 2019)是由中国IT社区CSDN主办的AI技术与产业年度盛会。多年经验淬炼,如今蓄势待发:2019年9月6-7日,大会将有近百位中美顶尖AI专家、知名企业代表以及千余名AI开发者齐聚北京,进行技术解读和产业论证。我们不空谈口号,只谈技术,诚挚邀请AI业内人士一起共铸人工智能新篇章!

I2c串口通信实现加速度传感器和FPGA的交流

此代码能实现加速度传感器与FPGA之间的交流,从而测出运动物体的加速度。

Python可以这样学(第一季:Python内功修炼)

董付国系列教材《Python程序设计基础》、《Python程序设计(第2版)》、《Python可以这样学》配套视频,讲解Python 3.5.x和3.6.x语法、内置对象用法、选择与循环以及函数设计与使用、lambda表达式用法、字符串与正则表达式应用、面向对象编程、文本文件与二进制文件操作、目录操作与系统运维、异常处理结构。

微信公众平台开发入门

本套课程的设计完全是为初学者量身打造,课程内容由浅入深,课程讲解通俗易懂,代码实现简洁清晰。通过本课程的学习,学员能够入门微信公众平台开发,能够胜任企业级的订阅号、服务号、企业号的应用开发工作。 通过本课程的学习,学员能够对微信公众平台有一个清晰的、系统性的认识。例如,公众号是什么,它有什么特点,它能做什么,怎么开发公众号。 其次,通过本课程的学习,学员能够掌握微信公众平台开发的方法、技术和应用实现。例如,开发者文档怎么看,开发环境怎么搭建,基本的消息交互如何实现,常用的方法技巧有哪些,真实应用怎么开发。

机器学习初学者必会的案例精讲

通过六个实际的编码项目,带领同学入门人工智能。这些项目涉及机器学习(回归,分类,聚类),深度学习(神经网络),底层数学算法,Weka数据挖掘,利用Git开源项目实战等。

eclipseme 1.7.9

eclipse 出了新的eclipseme插件,官方有下载,但特慢,我都下了大半天(可能自己网速差)。有急需要的朋友可以下哦。。。

Spring Boot -01- 快速入门篇(图文教程)

Spring Boot -01- 快速入门篇 今天开始不断整理 Spring Boot 2.0 版本学习笔记,大家可以在博客看到我的笔记,然后大家想看视频课程也可以到【慕课网】手机 app,去找【Spring Boot 2.0 深度实践】的课程,令人开心的是,课程完全免费! 什么是 Spring Boot? Spring Boot 是由 Pivotal 团队提供的全新框架。Spring Boot...

HoloLens2开发入门教程

本课程为HoloLens2开发入门教程,讲解部署开发环境,安装VS2019,Unity版本,Windows SDK,创建Unity项目,讲解如何使用MRTK,编辑器模拟手势交互,打包VS工程并编译部署应用到HoloLens上等。

最简单的倍频verilog程序(Quartus II)

一个工程文件 几段简单的代码 一个输入一个输出(50Mhz倍频到100Mhz)

计算机组成原理实验教程

西北工业大学计算机组成原理实验课唐都仪器实验帮助,同实验指导书。分为运算器,存储器,控制器,模型计算机,输入输出系统5个章节

4小时玩转微信小程序——基础入门与微信支付实战

这是一个门针对零基础学员学习微信小程序开发的视频教学课程。课程采用腾讯官方文档作为教程的唯一技术资料来源。杜绝网络上质量良莠不齐的资料给学员学习带来的障碍。 视频课程按照开发工具的下载、安装、使用、程序结构、视图层、逻辑层、微信小程序等几个部分组织课程,详细讲解整个小程序的开发过程

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

基于RSA通信密钥分发的加密通信

基于RSA通信密钥分发的加密通信,采用pycrypto中的RSA、AES模块实现

不同变质程度煤尘爆炸残留气体特征研究

为分析不同变质程度煤尘爆炸残留气体成分的特征规律,利用水平管道煤尘爆炸实验装置进行了贫瘦煤、肥煤、气煤、长焰煤4种不同变质程度的煤尘爆炸实验,研究了不同变质程度煤尘爆炸后气体残留物含量的差异,并对气体

设计模式(JAVA语言实现)--20种设计模式附带源码

课程亮点: 课程培训详细的笔记以及实例代码,让学员开始掌握设计模式知识点 课程内容: 工厂模式、桥接模式、组合模式、装饰器模式、外观模式、享元模式、原型模型、代理模式、单例模式、适配器模式 策略模式、模板方法模式、观察者模式、迭代器模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式 课程特色: 笔记设计模式,用笔记串连所有知识点,让学员从一点一滴积累,学习过程无压力 笔记标题采用关键字标识法,帮助学员更加容易记住知识点 笔记以超链接形式让知识点关联起来,形式知识体系 采用先概念后实例再应用方式,知识点深入浅出 提供授课内容笔记作为课后复习以及工作备查工具 部分图表(电脑PC端查看):

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

软件测试2小时入门

本课程内容系统、全面、简洁、通俗易懂,通过2个多小时的介绍,让大家对软件测试有个系统的理解和认识,具备基本的软件测试理论基础。 主要内容分为5个部分: 1 软件测试概述,了解测试是什么、测试的对象、原则、流程、方法、模型;&nbsp; 2.常用的黑盒测试用例设计方法及示例演示;&nbsp; 3 常用白盒测试用例设计方法及示例演示;&nbsp; 4.自动化测试优缺点、使用范围及示例‘;&nbsp; 5.测试经验谈。

几率大的Redis面试题(含答案)

本文的面试题如下: Redis 持久化机制 缓存雪崩、缓存穿透、缓存预热、缓存更新、缓存降级等问题 热点数据和冷数据是什么 Memcache与Redis的区别都有哪些? 单线程的redis为什么这么快 redis的数据类型,以及每种数据类型的使用场景,Redis 内部结构 redis的过期策略以及内存淘汰机制【~】 Redis 为什么是单线程的,优点 如何解决redis的并发竞争key问题 Red...

手把手实现Java图书管理系统(附源码)

【超实用课程内容】 本课程演示的是一套基于Java的SSM框架实现的图书管理系统,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的java人群。详细介绍了图书管理系统的实现,包括:环境搭建、系统业务、技术实现、项目运行、功能演示、系统扩展等,以通俗易懂的方式,手把手的带你从零开始运行本套图书管理系统,该项目附带全部源码可作为毕设使用。 【课程如何观看?】 PC端:https://edu.csdn.net/course/detail/27513 移动端:CSDN 学院APP(注意不是CSDN APP哦) 本课程为录播课,课程2年有效观看时长,大家可以抓紧时间学习后一起讨论哦~ 【学员专享增值服务】 源码开放 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化

jsp+servlet入门项目实例

jsp+servlet实现班级信息管理项目

winfrom中嵌套html,跟html的交互

winfrom中嵌套html,跟html的交互,源码就在里面一看就懂,很简单

Java面试题大全(2020版)

发现网上很多Java面试题都没有答案,所以花了很长时间搜集整理出来了这套Java面试题大全,希望对大家有帮助哈~ 本套Java面试题大全,全的不能再全,哈哈~ 一、Java 基础 1. JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境。 JRE:Java Runtime Environ...

python实现数字水印添加与提取及鲁棒性测试(GUI,基于DCT,含测试图片)

由python写的GUI,可以实现数字水印的添加与提取,提取是根据添加系数的相关性,实现了盲提取。含有两种攻击测试方法(高斯低通滤波、高斯白噪声)。基于python2.7,watermark.py为主

Xshell6完美破解版,亲测可用

Xshell6破解版,亲测可用,分享给大家。直接解压即可使用

你连存活到JDK8中著名的Bug都不知道,我怎么敢给你加薪

CopyOnWriteArrayList.java和ArrayList.java,这2个类的构造函数,注释中有一句话 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 public ArrayList(Collection&lt;? ...

相关热词 c# 不能序列化继承类 c# char* 调用 c# 开发dll模板 c#添加控件到工具箱 c#控制台组合数 编程计算猴子吃桃问题c# c# wpf 背景透明 随机抽取号码软件c# c# 开发环境 c# 属性和字段
立即提问