Question

我想在我的Node JS应用程序中使用Geocomplete (Github example)，一个JQuery插件。我是网络应用程序的新手，我很难搞清楚如何集成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是一个客户端库。因此，您需要在呈现的HTML中的<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，那么你会遇到一些非常严重的语法问题。

使用Node JS完成Geocomplete

1 个答案: