Javascript React-安装/卸载顺序，并确定如何实施“责任链”

在我的react应用程序中，我有一个按键监视程序document.addEventListener'keyup'，…-它设置为监视文档中的按键，除非我在输入、选择或文本区域内

---

现在一般来说，如果我有一个组件a，其中包含组件B，其中包含组件C，在我的体系结构中，我希望C能够控制keyup上发生的事情，当C卸载时，我希望将控制权交给B，当B被卸载时，我想把控制权交给A——安装最深的元件，它应该有一个键盘观察者来控制它

所以我的想法基本上是这样的：当A挂载时，为A定义键盘观察者并设置它们-当B挂载时，为B定义键盘观察者，但保存A的键盘观察者，这样当B挂载时，你可以将键盘观察者设置回A的状态，当C挂载时，也可以这样做-为C设置它们，但保存B中的

但这在很大程度上取决于装载和卸载的顺序，结果证明我的假设是错误的

import React from 'react';
import autobind from 'autobind-decorator';

@autobind
export class Container extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            showA: true
        }
    }

    hideA() {
        this.setState({showA:false});
    }

    render() {
        return (
            <div >
                <div>

                    {this.state.showA
                        ? <A onClose={this.hideA}/>
                        : null}

                </div>
            </div>
        )
    }
}

@autobind
class A extends React.Component {

    componentDidMount() {
        console.log('this should run 1st');
    }

    componentWillUnmount() {
        console.log('this should run 6th');
    }

    render() {
        return (
            <div>
                <h3>element A</h3>
                <B onClose={this.props.onClose}/>
            </div>
        )
    }
}

@autobind
class B extends React.Component {

    componentDidMount() {
        console.log('this should run 2nd');
    }

    componentWillUnmount() {
        console.log('this should run 5th');
    }

    render() {
        return (
            <div>
                <h3>element B</h3>
                <C onClose={this.props.onClose}/>
            </div>

        )
    }
}

@autobind
class C extends React.Component {

    componentDidMount() {
        console.log('this should run 3rd');
    }

    componentWillUnmount() {
        console.log('this should run 4th');
    }

    render() {
        return (
            <div>
                <h3>element C</h3>
                <button onClick={this.props.onClose}>CLOSE A B C</button>
            </div>

        )
    }
}

我用console.logging运行了上面的测试，结果证明我完全是反向的-它没有记录1,2,3按钮按下4,5,6-它记录了3,2,1按钮按下6,5 4

---

因此，我的想法是编写一个更高级别的组件，负责挂载，并在卸载时恢复责任，但这无法按我所希望的方式工作。我这样做不对吗？我能得到一些指导吗？

当C卸载时，我想把控制权交给B为什么？这似乎过于复杂。比如说，如果你的搜索框组件被卸载，你应该杀死监听器，而不是将其向上移动，例如，假设我有一个组件B用于“订单”，当B打开时，我希望keywatcher监视产品条形码，但在B内我可以选择打开一个搜索框，我们称之为组件C，当C打开时-只是暂时打开，它只在搜索期间打开-我不再希望B的产品条形码keywatcher工作，我希望搜索使用其keywatcher，而使用其自己的逻辑-但一旦搜索组件关闭，我希望B的keywatcher重新开始工作。你更有可能在reddit或其他地方得到更好的回应else@DanielLizik请不要推荐与OP计划的代码评审方式不符的代码。当C卸载时，我想把控制权交给B为什么？这似乎过于复杂。比如说，如果你的搜索框组件被卸载，你应该杀死监听器，而不是将其向上移动，例如，假设我有一个组件B用于“订单”，当B打开时，我希望keywatcher监视产品条形码，但在B内我可以选择打开一个搜索框，我们称之为组件C，当C打开时-只是暂时打开，它只在搜索期间打开-我不再希望B的产品条形码keywatcher工作，我希望搜索使用其keywatcher，而使用其自己的逻辑-但一旦搜索组件关闭，我希望B的keywatcher重新开始工作。你更有可能在reddit或其他地方得到更好的回应else@DanielLizik请不要推荐与OP计划的代码评审方式不符的代码。他们离题了。