React
yezitoo
这个作者很懒,什么都没留下…
展开
-
react-router-dom下的BrowserRouter和HashRouter,页面刷新404
HashRouter包裹下访问根服务: 假设为localhost:3000/import { HashRouter as Router, Route, Redirect } from 'react-router-dom'; // as的作用为将HashRouter重命名为Router,这样的好处是在反复测试HashRouter和BrowserRouter时,可以免去组件修改import Home from './pages/Home/index';import Hooks from './p转载 2020-11-27 18:19:24 · 1037 阅读 · 0 评论 -
react 打包后,项目部署完毕,刷新页面报错(404)
原因解析:之所以你在浏览器内可以由首页跳转到其他路由地址,是因为这是由前端自行渲染的,你在React Router定义了对应的路由,脚本并没有刷新网页访问后台,是JS动态更改了location。当你刷新时,你首先是访问的后台地址,然后返回的页面内加载了React代码,最后在浏览器内执行;也就是说如果这个时候报404,是因为你后台并没有针对这个路由给出返回HTML内容,也谈不上执行React Router了。解决方案一:如果你期望所有的路由都由React Router来定义,只有你的后台,无论转载 2020-11-27 18:07:22 · 4695 阅读 · 0 评论 -
react全局监听路由变化
关于WithRouter作用:把不是通过路由切换过来的组件中,将react-router 的 history、location、match 三个对象传入props对象上介绍一个简单应用通过withRouter将三个属性传入组件的props上,路径变化,属性就会变化,属性变化,就会触发componentWillReciveProps这个钩子,我们可以利用这个钩子做一些处理,而要监听路由的变化,就要监听整个项目的路由,所以我们要找到最大的组件 最大的组件是App,但是他是函数式组件,所以我们找到下一原创 2020-07-02 13:26:05 · 10917 阅读 · 0 评论 -
react-router-dom实现全局路由登陆拦截
首先我们建一个文件routerMap.js用来存储所有的路由信息,定义需要登陆拦截的页面(auth)://routerMap.jsimport Index from '../containers';import Detail from '../containers/detail';import Home from '../containers/home';import List from '../containers/list';import Topics from '../contain转载 2020-07-02 11:22:16 · 1394 阅读 · 0 评论 -
React Hook Forwarding Refs父组件调用子组件方法
const Father = () => { const NcRef = useRef() NcRef.current.changeVisible(false) //在这里调用了子组件的setVisible方法 return ( <div> <Child ref={NcRef} /> </div > )...原创 2019-11-26 18:04:46 · 2545 阅读 · 0 评论 -
Antd Table 整行样式
<Tablecolumns={item.columns.map((col,index)=>{return{...col,onHeaderCell:()=>{...原创 2019-11-26 13:24:13 · 2604 阅读 · 0 评论 -
React.Fragment
React.Fragment官方文档:React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表,并且不在DOM中增加额外节点。Fragments 看起来像空的 JSX 标签:render() { return ( <> <ChildA /> <ChildB /> ...转载 2019-11-12 14:58:25 · 223 阅读 · 0 评论 -
react 中通过ref获取高阶(HOC)子组件实例的解决方案
今天写react项目遇到一个父子组件通信的问题。这是一个非常常规的问题了,随便搜一下就能得到解决方案。总体来说可以分为两类:子组件需要获取父组件的信息,这通过props就可以解决; 父组件需要知道子组件的信息,这可以通过ref解决。我们这里讲的属于后者,但是又有些特殊,特殊就在于子组件是个高阶组件,比如使用@connect @withRouter包裹过的组件(其实大部分组件都会被这两...转载 2019-08-16 09:12:04 · 1675 阅读 · 0 评论 -
react中dangerouslySetInnerHTML使用(简洁)
在react中,通过富文本编辑器进行操作后的内容,会保留原有的标签样式,并不能正确展示。在显示时,将内容写入__html对象中即可。具体如下:<div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} />如果是直接调用接口中的值,则是以上的写法,如果是单纯的显示固定的内容,用如下的写法:<d...转载 2019-01-25 20:43:52 · 1404 阅读 · 0 评论 -
初探 React Router 4.0
官网:https://reacttraining.com/react-router/native/example/custom-linkReact Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件。所以 RR4 只是一堆提供了导航功能的组件(还有若干对象和方法),具有声明式(引入即用),可组合性的特点。http://www.jianshu...原创 2017-12-13 15:24:48 · 321 阅读 · 0 评论 -
React使用PropTypes进行类型检测
随着你的应用的变得越来越大,你可以通过typechecking来找到更多的bug。 对于某些应用,您可以使用JavaScript扩展(如Flow或TypeScript)对整个应用程序进行类型检查。即使你不使用这些,React也有一些内置的typechecking能力。 要在组件的props上运行typechecking,可以分配特殊的propTypes属性:class Greeting转载 2017-09-07 15:23:54 · 1227 阅读 · 0 评论 -
React虚拟DOM Diff算法解析
React中最神奇的部分莫过于虚拟DOM,以及其高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面,由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。React在这一部分已经做到足够透明,在实际开发中我们基本无需关心虚拟DOM是如何运作的。然而,作为有态度的程序员,我们总是对技术背后的原理充满着好奇。理解其运行机制不仅有助于更好的理解React组件的转载 2017-12-14 15:24:28 · 1330 阅读 · 0 评论