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

IT技术 reactjs class methods call
2021-04-21 17:40:32

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

这是我的代码。

第一个组件

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;
2个回答

你可以做这样的事情

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 组件中。还有其他解决方案吗?
2021-05-30 17:40:32
任何链接或示例?
2021-06-09 17:40:32
然后你可以使用 React.statics
2021-06-14 17:40:32
这是本案的正确答案。但是当两个组件不是父/子,而是兄弟/兄弟姐妹时,它不适用于困难的情况。
2021-06-19 17:40:32

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

此外,您很有可能并不真正需要它。考虑将其调用到现有组件中,这是一个更加独立的解决方案。但有时你仍然需要它,然后你有几个选择:

  • 向下传递方法,如果它是一个孩子(最简单的一个,它是传递的属性之一)
  • 添加事件库;在 React 生态系统中,Flux 方法最为人所知,它带有Redux库。您将所有事件分成单独的状态和动作,并从组件中分派它们
  • 如果您需要在父组件中使用来自子组件的函数,您可以包装在第三个组件中,并使用增强props克隆父组件。

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

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

constructor(props) {
   super(props);
   handleInstantiate();
}
谢谢,但是我的两个组件都是独立的,一个依赖另一个,我只需要从另一个组件调用一个组件的函数,就像我们从另一个类调用一个 java 类的静态函数一样
2021-05-29 17:40:32
如果您需要调用一个static函数,则可以将其分离为一个函数。所以把这个函数放到utils文件夹里,需要的时候再导入。如果涉及任何状态,则传递或外部状态管理。
2021-05-31 17:40:32
我已经更新了帖子。基本上,只需将其声明为常用函数,并在需要时调用——无需在类中保留静态方法(除非您以 OOP 风格编写,但 React 社区通常不鼓励这样做)。
2021-06-04 17:40:32
你能给我一个小例子吗
2021-06-18 17:40:32