ReactJS - 从另一个组件调用一个组件方法答案

【问题标题】：ReactJS - Call One Component Method From Another ComponentReactJS - 从另一个组件调用一个组件方法
【发布时间】：2017-08-19 16:19:45
【问题描述】：

我有两个组件。我想从第二个组件调用第一个组件的方法。我该怎么做？

这是我的代码。

第一个组件

class Header extends React.Component{

    constructor(){
        super();
    }

    checkClick(e, notyId){
       alert(notyId);
    }
}

export default Header;

第二个组件

class PopupOver extends React.Component{

    constructor(){
        super();
        // here i need to call Header class function check click....
        // How to call Header.checkClick() from this class
    }

    render(){
        return (
            <div className="displayinline col-md-12 ">
                Hello
            </div>
        );
    }
}

export default PopupOver;

【问题讨论】：

你为什么要这样做？我不认为它是好的做法，它应该打破组件模式。你有足够的插件在一个地方管理事件：例如 RxJS (Flux,Redux ...)
中断组件模式是什么意思？
独立的组件更容易重用。如果您想实现您想要的 - 合并它们并创建一个组件。考虑更改父组件方法名称时的情况：之后您需要检查您的项目并分别更改依赖项。
您可以查看 github.com/burakozturk16/pigeon

标签： reactjs class methods call

【解决方案1】：

你可以这样做

import React from 'react';

class Header extends React.Component {

constructor() {
    super();
}

checkClick(e, notyId) {
    alert(notyId);
}

render() {
    return (
        <PopupOver func ={this.checkClick } />
    )
}
};

class PopupOver extends React.Component {

constructor(props) {
    super(props);
    this.props.func(this, 1234);
}

render() {
    return (
        <div className="displayinline col-md-12 ">
            Hello
        </div>
    );
}
}

export default Header;

使用静态方法

var MyComponent = React.createClass({
 statics: {
 customMethod: function(foo) {
  return foo === 'bar';
  }
 },
   render: function() {
 }
});

MyComponent.customMethod('bar');  // true

【讨论】：

我不想将 PopupOver 组件添加到 Header 组件中。还有其他解决办法吗？
你可以使用 React.statics 来实现它
任何链接或示例？
这是本案例的正确答案。但是当两个组件不是父/子，而是兄弟/兄弟时，它不适用于困难的情况。

【解决方案2】：

嗯，实际上，React 不适合从父级调用子方法。一些框架，例如Cycle.js，允许轻松访问来自父子节点的数据，并对其做出反应。

另外，你很可能并不需要它。考虑将其调用到现有组件中，它是更独立的解决方案。但有时你仍然需要它，然后你就没有多少选择：

向下传递方法，如果它是一个孩子（最简单的方法，它是传递的属性之一）
添加事件库；在 React 生态系统中 Flux 方法是最广为人知的，使用 Redux 库。您将所有事件分成独立的状态和动作，然后从组件中分派它们
如果您需要在父组件中使用子组件的功能，您可以包装第三个组件，并使用增强的道具克隆父组件。

UPD：如果您需要共享一些不涉及任何状态的功能（如 OOP 中的静态函数），则无需将其包含在组件中。只需单独声明并在需要时调用：

let counter = 0;
function handleInstantiate() {
   counter++;
}

constructor(props) {
   super(props);
   handleInstantiate();
}

【讨论】：

谢谢，但是我的两个组件是独立的，一个依赖于另一个，我只需要从另一个组件调用一个组件的函数，就像我们从另一个类调用一个 java 类的静态函数一样
如果您需要调用static 函数，则可以将其分离为一个函数。所以把这个函数放到utils文件夹下，需要的时候导入。如果涉及任何状态，则比传递或外部状态管理。
你能给我一个小例子吗
我已经更新了帖子。基本上，只需将其声明为普通函数，并在需要时调用它——无需在类中保留静态方法（除非您以 OOP 风格编写，但在 React 社区中通常不鼓励这样做）。