react跨頁面跨元件傳值

2021-09-29 07:37:29 字數 1157 閱讀 9987

做需求的時候遇到這樣乙個情況,要跨頁面跨元件進行傳值,兩個頁面並不是父子關係

資料由a頁面傳到b頁面

在src目錄下建立store目錄,並在裡面建立test.js

import  from 'redux'

const defaultstate =

const store = createstore((state = defaultstate, action) =>

}default:

break

} return state

})export default store

a頁面

引入test.js

import store from '../../../store/test' //目錄情況請根據自己的實際情況來寫
寫傳遞函式

addlist() )

router.push('/promotionrulessetting') //路由跳轉

}

b頁面

//1.寫在this.state={}的下面

this.state = store.getstate()

store.subscribe(this.handlestoreupdate.bind(this))

//2.寫的位置你應該知道

handlestoreupdate()

在b頁面通過this.state.list可以訪問到a頁面傳過來的list。

注意

這種方法因為這句

this.state = store.getstate()
會導致你之前的this.state中的資料被覆蓋,我還沒有解決這個問題。如果你也像我一樣用this.state1 = store.getstate()來接受資料,那麼之前的資料確實不會被覆蓋,但是新的問題就是當你想修改資料使用this.setstate({})時,會發現,你此時修改的資料不是this.state中的資料而是this.state1中的資料。這就意味著我之前使用this.state資料的地方並不會進行資料的更新,因為更新的是this.state1的資料!

如果大家有解決方法也希望能教我一下哦~

跨頁面傳值

預設情況下,點選 button 按鈕後,會回傳到本頁面,但是通過指定 button 的postbackurl 屬性可以把資料提交到其他頁面,如在send.aspx 頁面中有 asp textbox id txtcontent runat server asp textbox asp button i...

React之Context跨級元件傳值

例如 react redux 的原理就是利用了跨級傳參的方法實現的,其中的好處不言而喻 在單純的父子傳參中this.props就可以了。子傳父也是通過呼叫父元件的方法去改變引數變化,假如在企業專案中不 只是單純的父子傳參,還有爺爺元件和孫子元件或者重孫玄孫甚至可能.玄玄玄孫等等,就好比自己的親戚的七...

React之 Context跨級元件傳值

在乙個典型的react專案中,資料是通過props屬性自上而下的 由父及子 進行傳遞,但是這種做法對於某些型別的屬性而言是極其繁瑣的 例如 地區偏好,ui主題 這些屬性是應用程式中許多元件都需要的。context提供了一種在元件之間共享此類值的方式,而不必顯示地通過元件樹的逐層傳遞props 第一步...