React - 加载JQuery库x-editable

Question

我正在尝试将外部JQuery库加载到我的React应用程序中。

  <script src="//code.jquery.com/jquery.js"></script>
  <script src="//getbootstrap.com/dist/js/bootstrap.min.js" > </script>
  <link href= "//getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
  <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

组件本身看起来像这样：

import React, { PropTypes } from 'react';

class PopoverEditable extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      mode: 'popup',
    };
  }

  shouldComponentUpdate() {
    return false;
  }

  componentDidMount() {
    this.renderEditable();
  }

  componentWillReceiveProps(newProps) {
    this.renderEditable();
  }

  renderEditable() {
    $('#' +this.props.value +'.popover-editable').editable({mode: this.state.mode});
  }


  handleModeChange(mode, e) {
    e.stopPropagation();
    this.setState({mode: mode}, this.renderEditable);
  }

  render() {
    return (
      <a href="#" ref={this.props.value} id={this.props.value} className={"popover-editable"} data-type="text" data-title="edit" >
        {this.props.value}
      </a>
    );
  }
}

PopoverEditable.propTypes = {
  children: PropTypes.node,
};

export default PopoverEditable;

调用renderEditable时，会返回

Uncaught (in promise) TypeError: $(...).editable is not a function
    at PopoverEditable.renderEditable (eval at <anonymous> (bundle.js:9679), <anonymous>:93:56)
    at PopoverEditable.proxiedMethod (eval at <anonymous> (bundle.js:2995), <anonymous>:44:30)
    at PopoverEditable.componentDidMount (eval at <anonymous> (bundle.js:9679), <anonymous>:83:12)
    at PopoverEditable.proxiedComponentDidMount (eval at <anonymous> (bundle.js:2995), <anonymous>:61:40)
    at ReactCompositeComponentWrapper.invokeComponentDidMountWithTimer (eval at <anonymous> (bundle.js:1423), <anonymous>:54:18)
    at CallbackQueue.notifyAll (eval at <anonymous> (bundle.js:1015), <anonymous>:67:22)
    at ReactReconcileTransaction.close (eval at <anonymous> (bundle.js:1537), <anonymous>:81:26)
    at ReactReconcileTransaction.closeAll (eval at <anonymous> (bundle.js:1081), <anonymous>:204:25)
    at ReactReconcileTransaction.perform (eval at <anonymous> (bundle.js:1081), <anonymous>:151:16)
    at ReactUpdatesFlushTransaction.perform (eval at <anonymous> (bundle.js:1081), <anonymous>:138:20)

我可以通过控制台运行代码$('.popover-editable').editable();，它可以正常工作。