reactjs - React 访问兄弟组件方法

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 的设计目的，它有助于确保组件设计良好并且不会与其他组件紧密耦合。

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

如果您需要调用组件属性之一中的方法，生命周期 Hook 仍然可以访问组件属性。