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

Question

我目前正在尝试将我主页中的一个按钮连接到 go 到另一个链接，并且我想利用另一个文件中的一些功能。 目前，我要使用的功能位于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 function 连接我的按钮，但我很难做到。 我尝试了以下方法：

Button variant="contained" className="support-button" 
          onClick={gotoExternalLink(e,"https://app.clovergive.com/App/Form/c226e457-5e64-4f75-8cbb-e8cba99138f4" )}>
          Support Us
        </Button>

任何人都可以提供一些支持或帮助吗？

Answer 1

站在一个组件上并从另一个组件调用方法不是 React 数据流的工作方式。

如果您只是想 go 到外部链接，您可以将该逻辑提取到一个 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>

如果您想 go 到外部链接然后隐藏设置菜单，您可能需要将 isSettingMenuOpen的isSettingMenuOpen到SettingMenu和Homepage的最近祖先。

另一个建议是使用Redux在一个集中位置管理所有 state。