使用Node JS的Geocomplete

Question

我想在我的Node应用中使用Geocomplete (Github example)，一个JQuery插件。我是web应用的新手，很难弄清楚如何集成JQuery的东西。

我像这样呈现我的页面：

render() {
  let { input } = this.state;

  return (
    <div className="row">
      <div className="col s12">
        <h4>Welcome!</h4>
        <input
          id="geocomplete"
          placeholder="Enter a search location”
          type="text"
          onChange={this.onInputChange.bind(this)}
          value={input} />
        <a
          onClick={this.onSearchClick.bind(this)}
          className='waves-effect waves-light btn'>Search!</a>
      </div>
    </div>
  )
}

下面的示例说明了如何执行以下操作：

$("#geocomplete").geocomplete()

但是我似乎不能在render()中做到这一点，所以我不确定是怎么做的。有什么想法吗？

谢谢!

Answer 1

在浏览器中运行的客户端JavaScript和在Node.js中运行的服务器端JavaScript会让您感到困惑。

Geocomplete是一个客户端库。因此，您需要在呈现的超文本标记语言中的<script>标记中引用它；例如：

render() {
  let { input } = this.state;

  return (
    <div className="row">
      <div className="col s12">
        <h4>Welcome!</h4>
        <input
          id="geocomplete"
          placeholder="Enter a search location”
          type="text"
          onChange={this.onInputChange.bind(this)}
          value={input} />
        <a
          onClick={this.onSearchClick.bind(this)}
          className="waves-effect waves-light btn">Search!</a>
      </div>
    </div>
    <script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
    <script src="/some/path/that/serves/jquery.geocomplete.js"></script>
  )
}

然后，您可以在客户端脚本中使用它(几乎可以肯定的是，您最终也将使用<script>标记来包含它)。

顺便说一句，这个render()函数应该是纯JS的，还是某种神秘的模板语言？如果它是一种模板语言，你应该提到哪一种(因为它看起来有点像JS，人们会感到困惑)。但是如果它被认为是纯JS，那么就会有一些非常严重的语法问题。