如何解决如何从React + Typescript中另一个文件中的导入组件中调用函数?
我目前正在尝试在首页上添加一个按钮以转到另一个链接,我想利用另一个文件中的某些功能。当前,我要使用的功能在SettingsMenu.tsx file
中,并且组件看起来像这样:
export class SettingsMenu extends Component<
SettingsMenuProps,SettingsMenuState
> {
constructor(props: SettingsMenuProps) {
//Lots of code
}
gotoExternalLink = (e: React.MouseEvent,url: string) => {
window.open(url,'_blank','noopener noreferrer');
this.hideSettingsMenu(e);
};
//More code
}
在我的主页上,我已经完成了import SettingsMenu from './SettingsMenu'
,并试图通过gotoExternalLink
函数来挂接我的按钮,我很难做到这一点。我尝试了以下方法:
Button variant="contained" className="support-button"
onClick={gotoExternalLink(e,"https://app.clovergive.com/App/Form/c226e457-5e64-4f75-8cbb-e8cba99138f4" )}>
Support Us
</Button>
任何人都可以提供一些支持或帮助吗?
解决方法
站在一个组件上并从另一个组件调用方法不是React数据流的工作方式。
如果只想转到外部链接,则可以将该逻辑提取到utils文件中,并在每个事件处理程序中调用它。
//in utils.ts
export const goToExternalLinkUtil = (url: string) => {
window.open(url,'_blank','noopener noreferrer');
}
// in HomePage.tsx
<Button variant="contained"
className="support-button"
onClick={() => { gotoExternalLinkUtil("https://app.clovergive.com/App/Form/c226e457-5e64-4f75-8cbb-e8cba99138f4");}
>
Support Us
</Button>
如果您想转到外部链接,然后隐藏设置菜单,则可能希望将isSettingMenuOpen
的{{3}}到SettingMenu
和{{1}的最近祖先}。
另一建议是使用lift up the state在一个集中位置管理所有状态。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。