如何使用 redux 从深度嵌套的子组件调用父组件中的函数

class Parent extends React.Component{
    constructor(props){
        super(props);
        this.clicked = this.clicked.bind(this);
    }

    getChildrenValues(){
        console.log("Children values");
    }

    render(){
        return <div>
            Parent 

            <Component1>

                <Component2>
                    <Child />   

                </Component2>

            </Component1>

        </div>
    }
}


class Child extends React.Component{
    constructor(props){
        super(props);
        this.clicked = this.clicked.bind(this);
    }

    clicked(){
        this.props.dispatch({type: "InvokeParent"});
    }

    render(){
        return <div>
            <button onClick = {this.clicked}>Click Here</button>
        </div>
    }
}

如何从“Child”组件调用 getChildrenValues 函数。我试图从父组件获取所有子值并提交，但我不知道如何在 redux 中触发该函数。在 Flux 中，我曾经执行 addChangeListener 并触发该函数。

仅根据您的示例，我会说这种情况根本不涉及 redux。 Redux 是管理全局状态的工具。此示例中没有任何内容是触摸状态。

为了使此示例代码正常工作，将您的方法作为 prop 向下传递，并在单击时调用它。如果取决于子组件的嵌套程度，这可能会很混乱。

class Parent extends React.Component{
    constructor(props){
        super(props);
        this.clicked = this.clicked.bind(this);
    }

    getChildrenValues(){
        console.log("Children values");
    }

    render(){
        return <div>
            Parent 

            <Component1>

                <Component2>
                    <Child invokeParent={this.getChildrenValues} />   

                </Component2>

            </Component1>

        </div>
    }
}


class Child extends React.Component{
    constructor(props){
        super(props);
        this.clicked = this.clicked.bind(this);
    }

    clicked(){
        this.props.dispatch({type: "InvokeParent"});
    }

    render(){
        return <div>
            <button onClick = {this.props.invokeParent}>Click Here</button>
        </div>
    }
}