0

我想在我的 Node JS 应用程序中使用Geocomplete （Github 示例），一个 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()

但我似乎无法在渲染（）中做到这一点，所以我不确定如何。有任何想法吗？

谢谢！

4

1 回答 1

0

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

Geocomplete 是一个客户端库。所以你需要<script>在你渲染的 HTML 的标签中引用它；例如：

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，你就会遇到一些非常严重的语法问题。

于 2016-05-19T21:40:23.813 回答