Redux：將信息傳遞給/從窗口孩子

本質上，我試圖創建一個應用程序，它有一個記事本功能，打開一個窗口子窗體並將父窗體中的某些信息傳遞給它。Redux：將信息傳遞給/從窗口孩子

但是，如何將信息從孩子發送給父母，特別是處理調度操作時遇到問題。

我能弄明白從父母傳遞給孩子一樣所以不使用終極版：

父窗口

class NavBar extends React.Component { 
    constructor() { 
     super() 
     this.handleNotesMenu = this.handleNotesMenu.bind(this) 
    } 

handleNotesMenu() { 
    window.id = this.props.id 
    window.userName = this.props.userName 
    window.currentReduxState = store.getState() 
    const notePad = window.open('NotePad', 'notes', 'toolbar=0,status=0,width=715,height=325') 
}

子窗口

export class NotePad extends React.Component { 
    constructor(props) { 
     super(props) 
     this.handleChange = this.handleChange.bind(this) 
     this.state = { 
      notes: window.opener.state.getIn(['plan', 'notes']) 
     } 
    } 


    handleChange(tabID) { 
     return e => { 
      const state = {} 
      state[tabID] = e.target.value 
      this.setState(state) 
     } 
    } 
    render() { 
     return (
       <textarea 
        id="saveArea" 
        value={this.state.notes} 
        onChange={this.handleChange('notes')} 
        name="textarea" 
       /> 
     ) 
    } 
}

我想到將操作調度員添加到孩子很難，所以我在想omehow加入sessionStorage。但後來我很難看到父窗口能夠在運行中偵聽listenStorage。

有什麼想法？在處理React/Redux中的窗口小孩時，最佳做法是什麼？

來源

2017-06-13 Alejandro

我不認爲應該使用瀏覽器窗口/彈出式實例作爲父內部呈現的組件，因爲它不是真正屬於同一個DOM的一部分。您不會顯示'NavBar'是否具有'render（）'方法。無論如何，所有反應組件都需要渲染方法。 – heyhugo

發送方法爲支柱，將走在返回的數據從子組件參數，並用這些數據調用這個方法在你childcomponent ......像這樣的.... 在父組件.....

someMethod(data){ 
     // do something here with data 
    }

在渲染方法通過此方法來子組件爲...

<ChildComponent someMethod={this.someMethod} />

在你的孩子組件調用像這樣的方法

現在...

this.props.someMethod(someData);

就是這樣你完成...... 你已經通過了數據，而無需派遣你的父組件......在那的someMethod（），你可以做任何你想用這些數據做

來源

2017-06-13 05:15:02

Redux：將信息傳遞給/從窗口孩子

回答

相關問題