与 jquery 的反应不起作用

Question

我正在尝试将 swiper 插件集成到我的 React 组件中，并且 css 正在工作，但是当我单击箭头时，滑块不起作用，似乎 swiper 的 js 代码没有运行.

var Swiper = React.createClass({
  componentDidMount() {
    let el = this.getDOMNode();
    let swiper = new Swiper(el);
  },
  render: function() {
    return (
      <div className="swiper-container">
        <div className="swiper-wrapper">
          <!-- Slides -->
          { this.props.children }
        </div>
        <div className="swiper-button-prev"></div>
        <div className="swiper-button-next"></div>
      </div>
    );
  }
});

var Post = React.createClass({
  render: function() {
    return (
      <div className="swiper-slide">{this.props.title}</div>
    );
  }
});

var Posts = React.createClass({

 render() {
    return (
        <Swiper>
          <Post title="1" />
          <Post title="2" />
        </Swiper> 
    );
  }
});

fiddle: http://jsbin.com/ramugenoqe/1/edit?html,js,output

Answer 1

http://jsbin.com/tituxeruka/1/

这是一个有效的 JSFiddle。

主要问题是您的组件名为 Swiper。

var Swiper = React.createClass({
  componentDidMount() {
    let el = this.getDOMNode();
    let swiper = new Swiper(el);
  },

let swiper = new Swiper(el) 尝试创建 React 组件的实例而不是实际的插件。要解决此问题，只需更改组件的名称即可避免命名冲突（参见 fiddle）。

我不熟悉 Swiper，但我也更改了设置以反映我在此处找到的文档 http://www.idangero.us/swiper/get-started/#.VS43-fnF8X8 以传入 class 选择器和配置对象。

与 jquery 的反应不起作用

React with jquery does not work

javascript

jquery

reactjs