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：将信息传递给/从窗口孩子

回答

相关问题