2017-06-13 6 views
0

私は、ウィンドウの子を開き、(還元状態を保持する)親からいくつかの情報を渡すノートパッド機能を持つアプリケーションを作成しようとしています。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" 
       /> 
     ) 
    } 
} 

I子供にアクションディスパッチャーを追加することは難しいと思ったので、私はomehowをsessionstorageと組み込みます。しかし、私は親ウィンドウがどのようにして、その場でlistenStorageを聞くことができるのかに困惑しました。

どのような考えですか? React/Reduxの窓ガラスの子供を扱う際のベストプラクティスは何でしょうか?

+0

私は考えていませんブラウザーウィンドウ/ポップアップインスタンスは、実際には同じDOMの一部ではないため、親内部からレンダリングされるコンポーネントとして使用する必要があります。 'NavBar'に' render() 'メソッドがあるかどうかは表示されません。どのような場合でも、すべての反応コンポーネントにレンダリングメソッドが必要です。 – heyhugo

答えて

0

子コンポーネントから引数として戻ってデータを取得し、そのデータを使用してchildcomponentにこのメソッドを呼び出します小道具などの方法を送信...このように.... を親コンポーネントで.....

あなたのrenderメソッドで
someMethod(data){ 
     // do something here with data 
    } 

...などの子要素には、このメソッドを渡すあなたの子コンポーネントを呼び出し、このようなこと方法で今

<ChildComponent someMethod={this.someMethod} /> 

...

あなたはそのデータをどうしたいものは何でも行うことができます

そして、それはあなたが実行されていることだ... あなたは派遣せずにデータをあなたの親コンポーネントに合格している...それのsomeMethodでは()

関連する問題