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

如何从另一个React.js文件中调用函数？

1 个答案: