如何從另一個React.js文件調用函數？

我想調用一個函數來顯示來自另一個文件的模式對話框。模態對話框起作用。我有MyModal呈現一個按鈕，我可以點擊它顯示模式對話框。非常好。我的問題是，當我試圖從其他文件中顯示該模式。如何從另一個React.js文件調用函數？

MyModal.jsx

export default class MultiviewDialog extends React.Component { 
    //some stuff here 
    showModal() { ... } 
}

SomeOtherFile.jsx

import MyModal from './MyModal.jsx'; 

showTheModal() { 
    MyModal.showModal(); 
} 

render() { 
    //render something 
}

我收到錯誤：

SomeOtherFile.jsx:<LINE> Uncaught TypeError:_MyModal2.default.showModal is not a function(…)

與「2」那是什麼它增加在那裏？我該如何調用showModal函數？

來源

2016-11-22 noblerare

* 2「它在那裏加入？‘*這有’有什麼用的」同辦怎麼巴貝爾轉換模塊導入。 *「我如何調用showModal函數？」*您如何期望此功能起作用？爲什麼是一個組件**實例**的方法？如果你想要一個靜態方法，你必須用'static'來定義它。這與JavaScript類的基礎知識有關，而不是React。但是，雖然我們可以告訴你如何調用該方法，但它很可能不是解決整體問題的方法。再次，這種方法的目的是什麼？ –

@FelixKling模態從react-bootstrap獲得（https://react-bootstrap.github.io/components.html#modal-custom-sizing）。 showModal方法設置一個狀態，有效地顯示模態對話框。 'this.setState（{show：true}）;'我試着讓'showModal'靜態，但後來出現錯誤，抱怨'this.setState'不是函數。 – noblerare

這可能不是一個好習慣。最好發起一個動作來控制模式顯示/隱藏。 –

您可以使用refs來調用someotherfile進口組件類裏面的函數

import MyModal from './MyModal.jsx'; 

showTheModal =() => { 
    this._child.showModal(); // this will call MyModal showmodal function 
} 

render() { 
    //render something 
    return (
     <MyModal ref={(child) => {this._child = child}} 
    ) 
}

來源

2016-11-22 04:05:03

如何從另一個React.js文件調用函數？

回答

相關問題