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

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

这是我的代码。

第一组分

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;

来源

2016-08-24 Kushal Jain

你为什么要这么做？我不认为它的良好做法，它应该打破组件模式。你有足够的插件来管理一个地方的事件：例如RxJS（Flux，Redux ...） –

你是什么意思的中断组件模式？ –

独立时重用组件更容易。如果你想达到你想要的 - 合并它们并创建一个组件。考虑更改父组件方法名称的情况：此后，您需要分别检查项目并更改依赖关系。 –

你可以做这样的事情

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

来源

2016-08-24 18:25:05 Moniv

我不想将PopupOver组件添加到Header组件中。还有其他解决方案吗？ –

您可以使用React.statics然后 – Moniv

任何链接或示例？ –

嗯，其实，REACT为不适合调用从父孩子的方法。一些框架，如Cycle.js，可以轻松访问父母和孩子的数据，并对其作出反应。

此外，你很可能并不需要它。考虑将其称为现有组件，它是更独立的解决方案。但有时你还是需要它，那么你有几种选择：

通法下，如果是一个孩子（一个最简单的，而且它是通过属性之一）
添加事件库;在React生态系统中Flux方法最为人所知，其中有Redux库。如果您需要使用父组件中的子项的函数，则可以将所有事件分离为分离的状态和操作，并从组件
中派发它们，可以包装在第三个组件中，并使用增强的道具克隆父项。

UPD：如果你需要共享一些功能，它不涉及任何状态（如在面向对象的静态函数），那么就没有必要包含它里面的组件。只是单独声明，并调用时需要：

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

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

来源

2016-08-24 10:18:12 Bloomca

谢谢，但我的两个组件都是独立的，一方面依赖于其他组件，另一方面我需要调用一个组件的函数，就像我们从另一个类调用一个java类的静态函数一样 –

如果需要调用'静态“功能，它可以分开只是一个功能。所以将这个函数放在'utils'文件夹中，并在需要时导入它。如果涉及到任何国家，则不是传递或外部国家管理。 – Bloomca

可以请你给我一个小例子 –

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

回答

相关问题