react.js页面间传值方式

本文介绍了一个React应用中使用React Router进行页面跳转并传递参数的方法。重点讨论了如何通过history对象进行页面跳转,并将唯一标识ID作为状态传递。此外还提到了在目标页面接收参数时遇到的问题及解决方案。

页面中的表格需要跳转页面编辑,同时应该携带唯一标识id:

import { History } from 'react-router';
    edit = (record) => {
        this.props.history.push({
            pathname:'/app/systemManage/EditUser',
            state:{
                id:record.id
            }
        });
    };

编辑页面中在取到id:

    var userId = this.props.location.state.id;

但是在编辑页面刷新的时候会报错,找不到id,所以换成了用localStorage存储id,解决刷新报错。

感觉react.js有专门的方式跳转页面传值,有待学习奋斗...

astro.js一个基于天文数据的JavaScript库,并不是专门用于前端页面工具。如果你想要在HTML页面递数据,特别是在单页应用(SPA)或者使用现代前端框架如Vue、React或Angular的情况下,你可以考虑以下几种方式: 1. **使用事件(Event Bus)**:创建一个全局的事件中心,当在astro.js处理完某个数据后触发一个自定义事件,其他部分的页面通过监听这个事件获取新数据。 ```javascript // 创建事件中心 const eventBus = new Vue(); // astro.js 中的数据更新 eventBus.$emit('updateData', { astronomyValue }); // 页面接收数据 eventBus.$on('updateData', data => { // 使用data处理新的天文数据 }); ``` 2. **Vuex(仅限Vue)**:将astro.js的数据存储在一个状态管理器中,这样可以在整个应用内共享和同步数据。 3. **React Context API** (仅限React):创建一个React Context,将astro.js的数据作为props递给上下文消费者组件。 4. **URLSearchParams或API调用**:如果数据量不大或者适合于序列化,可以将数据附加到URL查询参数或者发起一个AJAX请求来获取数据。 5. **Local Storage / Session Storage**:对于需要长期保存的数据,可以将其存储在浏览器的本地存储中。 请注意,选择哪种方法取决于你的具体需求和项目的架构。如果你是在谈论一般的JavaScript库之的通信,而不是特定的astro.js,上述建议同样适用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值