反应访问兄弟组件方法

Question

使用React [15.6.1] Redux [3.7.2]和Router [4.1.1]我正在尝试访问一种方法，该方法属于其他（同级）组件，但似乎无法访问它们。反正有出口这些方法吗？

               ----------
               ¦ Parent ¦
               ----------
                   ¦
    -------------------------------
    ¦              ¦              ¦
-----------    -----------    -----------
¦ Child 1 ¦    ¦ Child 2 ¦    ¦ Child 3 ¦
-----------    -----------    -----------


// Child 1 has a method submitChild1()
// Child 2 has a method submitChild2()
// Child 3 has to access both of those methods


class Parent1 extends React.Component {

    render() {
        return (
            <div>
                <Child1 />
                <Child2 />
                <Child3 />
            </div>
        );
    }

}

class Child1 extends React.Component {

    submitChild1() {
        dispatch(Action1());
    }

    render() {...}

}

class Child2 extends React.Component {

    submitChild2() {
        dispatch(Action2());
    }

    render() {...}

}

class Child3 extends React.Component {

    submitTheOtherMethods() {
        // try to access Child 1 method
        // try to access Child 2 method
    }

    render() {...}

}

Answer 1

您无法做到这一点，这违背了React设计的目的，该目的旨在确保组件设计良好且不会与其他组件紧密耦合。

如果要在多个不同组件之间共享方法，则需要在父组件上定义方法并将这些方法作为属性传递给子组件。

如果需要在其中一个中调用方法，则生命周期挂钩仍将有权访问组件属性。