如何从另一个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文件调用函数？

回答

相关问题