当前位置: 首页 > 面试题库 >

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

房泉
2023-03-14
问题内容

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

这是我的代码。

第一部分

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;

问题答案:

你可以做这样的事情

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


 类似资料:
  • 问题内容: 我有一个包含一个按钮的标题组件,并且我希望该按钮在单击时显示另一个组件(模式页面)。 我可以做这样的事情: 这是我的标头组件: 这是我的模态页面组件,单击其他组件上的按钮时应显示该组件页面: 用于模态的库:https : //github.com/marcio/react-skylight 问题答案: 更像这样: 确保在子组件上公开一个方法: 基本上,这是在将SkyLight的方法包装

  • 问题内容: 我是React的新手。希望使用单独文件中的少量组件来开发应用程序并将其导入到我的App.js中 我尝试过但无法弄清楚我在做什么错。 这是我的html: 这是我的App.js :( 来自js /目录) 这是我的MyComp.js (来自js / components /目录) 如果我这样尝试,我什么也看不到。而如果我在App.js中创建类,则它就像一个魅力。 有什么建议我在做什么错? 问

  • 我知道我们在函数组件中使用history.push(),并对重定向路由做出反应。但是在类组件中,我们如何在点击按钮时重定向

  • 在这里,我只想确保抛出异常测试,但希望跳过调用方法在其中。我试着跟着走,但没有奏效

  • 嗨,我有一个对象,它正在使用一个组件中的可观察到的东西从api更新,我想捕获同一对象对另一个组件的更改。这两个组件都是两个选项卡。最初是根据路由更新数据。以下是正在更新的数据: 我在这里捕获数据: 在中,数据最初是从路由获取的。考虑到上述情况,我有两个问题: 如果应用程序有多个组件,我想我必须在每个组件中事件,这将是一个很好的做法。请提出任何替代方法? 由于数据来自服务器,为什么不从中的获取更新的

  • 问题内容: 许多模板语言都有“ slots”或“ yield”语句,它们允许进行某种形式的控制反转,以将一个模板包装在另一个模板中。 Angular具有“ transclude”选项。 Rails有收益声明。如果React.js拥有yield语句,它将看起来像这样: 所需的输出: React,React.js没有。如何定义包装器组件以实现相同的输出? 问题答案: 尝试: 有关更多信息,请参见文档中