Question

基本上我正在尝试创建一个应用程序，其中有一个记事本功能，可以打开一个窗口子项，并将父项（保存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" 
                />
        )
    }
}

我想到了为孩子添加动作调度员很难，所以我想以某种方式与 sessionStorage 合并。但后来我对父窗口如何能够即时收听listenStorage感到难过。

有什么想法？在React / Redux中处理窗口子项时最好的做法是什么？

Answer 1

发送一个方法作为prop，它将从子组件中返回数据作为参数，并在子组件中使用该数据调用此方法...像这样.... 在父组件中.....

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

在你的render方法中，将此方法传递给子组件为...

<ChildComponent someMethod={this.someMethod}  />

现在在你的子组件中调用这样的方法......

this.props.someMethod(someData);

这就是你的成就...... 你已经传递了你的父组件的数据而没有派遣......在那个someMethod（）中，你可以做任何你想对这些数据做的事情

Redux：向窗口子

1 个答案: