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

Question

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

这是我的代码。

第一个组件

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;

原文由 Kushal Jain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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

原文由 Mohit Verma 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

此外，您很有可能并不真正需要它。考虑将其调用到现有组件中，它是更独立的解决方案。但有时您仍然需要它，然后您别无选择：

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

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

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

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

原文由 Bloomca 发布，翻译遵循 CC BY-SA 3.0 许可协议