javascript - Annyang in React - 最佳实践

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 上不起作用，check it out on JSBin .