Question

只是尝试使用reactjs并遇到了我想在另一个组件上调用方法的情况：

class MyComp extends React.Component {

callMe(){
...
       }
}

所以mycomp2：

import MyComp from 'myComp';

class MyComp2 extends React.Component {

test(){
       MyComp.callMe();
      }
}

我该怎么做？

Answer 1

不能。你不能在反应组件中做到这一点。唯一的方法是将该功能移到他们共同的祖先。

当然，还有另外一种方法，为什么不考虑减少？让我们通过redux状态对组件进行反应。这样，你永远不会有这个难题。

Answer 2

如果方法 callMe 不使用此，您可以将其解析为静态，以便像这样使用它。

class MyComp extends React.Component {

    static callMe(){
    ...
    }
}

如果没有，您可以使用参考使其正常工作。

您可能需要： https://facebook.github.io/react/docs/refs-and-the-dom.html

Answer 3

这取决于您的组件彼此之间的关系。如果一个是父母而另一个是孩子，那么该函数可以作为从父母到孩子的道具传递，例如

class Parent extends React.Component {
    callMe() {
        console.log('called');
    }

    render() {
        return (
            <Child doSomething={() => this.callMe()} />
        );
    }
}

class Child extends React.Component {
    render() {
         <button onClick={this.props.doSomething}>Calls the parent fn</button>
    }
}

或者如果它们不是父子关系，那么你需要引入一个可以存活该函数的父组件，然后以相同的方式通过props传递它。

如果这些方法似乎都不合适，那么让我们知道您要实现的行为需要这样做，而且我的构建代码的方式也不同。

在reactjs中如何从另一个组件调用方法？

3 个答案: