javascript - 与 jquery react 不起作用

Question

我正在尝试将 swiper 插件集成到我的 React 组件中，并且 css 可以正常工作，但是当我单击箭头时， slider 不起作用，似乎 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，但我也更改了设置以反射(reflect)我在此处找到的文档 http://www.idangero.us/swiper/get-started/#.VS43-fnF8X8传递一个类选择器和配置对象。