Javascript 安阳在react-最佳实践

我希望将语音识别集成到我的React项目中，我可能会将语音识别可以控制的每个功能分离到各种服务中，但目前我对如何实现这一点非常困惑

我可以通过将代码放在索引中并运行以下操作来开始工作：

const annyang = require('annyang');
if (annyang) {
// Let's define a command.
annyang.debug();
var commands = {
  'hello world': function() { alert('Hello'); }
};

// Add our commands to annyang
annyang.addCommands(commands);

annyang.addCallback('soundstart', function() {
  console.log('sound detected');
});

annyang.addCallback('result', function() {
  console.log('sound stopped');
});
// Start listening.
annyang.start();
}

但是我真的很困惑这个代码将如何与我已经拥有的组件交互？我是一个新的反应，并希望知道这样的事情的最佳做法

我正在考虑在它自己的文件中运行这个代码，可能会导出模块并在我的组件中需要它，这是一个好的做法还是我遗漏了什么

---

如果我不清楚，请告诉我，我会尽力解释，这取决于你的目标

一个好的做法是将所有Annyang命令放在顶级组件中（例如，

），并设置执行语音命令时的状态（或调度操作）。这是一个非常基本的例子，没有任何通量实现或许多组件：

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={hello:false}；
}
componentDidMount（）{
如果（安阳）{
//让我们定义一个命令。
var命令={
'hello'：（）=>this.setState（{hello:true}）
};
//将我们的命令添加到annyang
annyang.addCommands（commands）；
//开始听。
annyang.start（）；
}
}
render（）{
返回此。state.hello？：；
}
}
类欢迎扩展React.Component{
render（）{
回复说“你好”！；
}
}
类SaidHello扩展了React.Component{
render（）{
你好！你好吗？；
}
}
ReactDOM.render（，document.getElementById（'View'））
我相信这个例子会符合我将要使用的目的，这个def给了我一些可以使用的东西。感谢您抽出时间：）