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 - 從另一個組件調用一個組件方法

回答

相關問題