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

Question

我試圖調用一個函數來顯示另一個文件中的模式對話框。 模態對話框起作用。 我讓MyModal渲染了一個我可以單擊的按鈕，它顯示了模態對話框。 非常好。 我的問題是當我嘗試從其他文件中顯示該模式時。

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函數？

Answer 1

您可以使用refs來調用某個其他文件中導入的組件類內部的函數

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}}
   )
}