安阳在反应 - 最佳实践

Question

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

我可以通过将代码放在我的索引中并运行以下内容来让Annyang工作：

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();
}

但是我真的很困惑这段代码如何与我已经拥有的组件交互？ 我是 React 新手，很想知道这样的最佳实践。

我正在考虑在其自己的文件中运行此代码，并可能导出模块并在我的组件中要求它，这是一个好习惯还是我遗漏了什么？

如果我不清楚，请告诉我，我会尽力解释

Answer 1

这真的取决于你的目标是什么。

一个好的做法是将所有 Annyang 命令放在顶级组件（例如<App/> ）中，并在执行语音命令时设置状态（或调度操作）。 这是一个非常基本的示例，没有任何通量实现或许多组件：

 class App extends React.Component { constructor() { super(); this.state = { hello: false }; } componentDidMount() { if (annyang) { // Let's define a command. var commands = { 'hello': () => this.setState({ hello: true }) }; // Add our commands to annyang annyang.addCommands(commands); // Start listening. annyang.start(); } } render() { return this.state.hello ? <SaidHello /> : <Welcome />; } } class Welcome extends React.Component { render() { return <div>Say "hello"!</div>; } } class SaidHello extends React.Component { render() { return <div>Well, hello! How are you?</div>; } } ReactDOM.render(<App/>, document.getElementById('View'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script> <div id="View"></div>

请记住在您的浏览器中允许麦克风访问，否则它将无法正常工作。 如果此示例在 StackOverflow 上不起作用，请在 JSBin 上查看。

Answer 2

如果你想使用这个库

useEffect(() => {
if (annyang) {
var commands = {
 "Hello": function,
 "Bye": function,
 "Let's have ours": function,
 "Turn on the nursery": function,
 "Who are you": function,
 "What can you do": function,
 "What are you written on": function,
 "Come on fresh": function,
"Raspberry Lada": function
 "The heat has gone": function
"Open": () => function(true),
"Close": () => function(false)
}