如何从React + Typescript中另一个文件中的导入组件中调用函数？

编程问答 2023-02-13

问题描述

我目前正在尝试在首页上添加一个按钮以转到另一个链接，我想利用另一个文件中的某些功能。当前，我要使用的功能在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在一个集中位置管理所有状态。

buttonbuttonimportonclickreactjsreactjstypescripttypescript