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

【问题标题】：How to call a function from an imported component in another file in React + Typescript?如何从 React + Typescript 中另一个文件中的导入组件调用函数？
【发布时间】：2020-08-14 13:21:29
【问题描述】：

我目前正在尝试在我的主页上连接一个按钮以转到另一个链接，并且我想利用另一个文件中的一些功能。目前，我要使用的功能在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>

谁能提供一些支持或帮助？

【问题讨论】：

试试onClick={e => gotoExternalLink(e,"https://app.clovergive.com/App/Form/c226e457-5e64-4f75-8cbb-e8cba99138f4" )}
hmm...代码“找不到名称 gotoExternalLink”

标签： reactjs typescript button import onclick

【解决方案1】：

站在一个组件并从另一个组件调用方法不是 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 的lift up the state 与SettingMenu 和Homepage 的最近祖先。

另一个建议是使用Redux 在一个集中的地方管理所有状态。

【讨论】：