reactjs中如何访问另一个组件的功能？答案

【问题标题】：How to access the function of another component in reactjs?reactjs中如何访问另一个组件的功能？
【发布时间】：2019-11-27 08:19:03
【问题描述】：

我是新手，我在尝试创建的应用程序中遇到问题。我有三个组件。因此，在主组件中，我获取数据并将数据发送到进度条组件，当进度条加载时，我想访问另一个组件的功能。如何访问其他组件的功能？

主要组件

{analysis.tontop.map(({ tone, value }) => (
                    <MyProgressBar
                      onClick={() => this.handleSentClick(tone)} //this is where I want to call the function of the sound component. or is this not the correct place to call the function of the other component?
                      value={value}
                      text={tone}
                      key={tone}
                    />
                  ))}

进度条组件

const MyProgressBar = ({ value, text, onClick }) => {
  return (
      <ProgressBar
        onClick={onClick}
        max={100}
        now={value}
      />
    </div>
  );
};

我想从中访问函数的组件

function Sound(tone, enteredText) { 

  const handleSentClick = ({ tone, onClick }) => { 
    //this is the function that I want to access in the main component
      console.log('something something');
    };

【问题讨论】：

使用导出和导入，还是我弄错了？
你真的在MainComponent中使用Sound组件吗？您能否再显示一些代码，以便我们知道 Sound、Progressbar 和 MainComponent 是如何实际相互使用的？
@ErtanHasani 是的，声音组件在 mainComponent 中，但进度条在我导入的另一个文件中。它实际上是一个非常大的应用程序，所以我只是发布了我认为对于这个问题来说必要的部分
我认为函数 handleSentClick() 应该驻留在主组件类中，因为您正在使用此运算符进行调用
在声音组件中需要获取一些数据，所以我将 handleSentClick 函数放在那里，它会在数据获取完成后执行一些操作。我只是在这里添加控制台日志只是为了进行一些演示。

标签： javascript reactjs

【解决方案1】：

你不能直接使用其他组件内部函数，因为没有父子关系，我的建议是使用一些状态管理库来实现这种功能，比如redux或mobx 它使您可以通过组件道具调度函数并从应用程序状态中检索一些数据。你可以查看this 文章了解如何在现有的 React 项目上实现 redux。

【讨论】：

redux 对于我的简单应用来说似乎太复杂了。我只需要播放一个声音，当我单击进度条时，我将从声音组件中的 api 收到该声音，当我单击主应用程序上的提交按钮时，我将收到该进度条。如您所见，我已将集成到 mainComponent 中，我不能为 Sound 组件做类似的事情
您可以将要全局调用的函数分开。创建一个全局 functions.js 并从那里导出声音函数，然后导入到您要调用该函数的任何组件。但我还是建议你使用状态管理库，你可以选择比 redux 更容易使用的 mobx。在此处查看如何创建辅助函数：stackoverflow.com/questions/33539774/…