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> 
    );
  }
});

小提琴：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组件的实例，而不是实际的插件。要解决此问题，只需更改组件的名称，以便没有命名冲突（请参阅小提琴）。

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

与jquery进行反应不起作用

1 个答案: