reactjs中如何使用swiper.js

reactjs中如何使用swiper.js的这个效果

main.jsx如下：

import $ from 'jquery';
import './js/swiper.jquery.min.js';
import React from 'react';
import {render} from 'react-dom';

var shell = document.createElement('div');
shell.id = 'mainDiv';
document.body.appendChild(shell);
//添加meta标签
let oMeta = document.createElement('meta');
oMeta.name = "viewport";
oMeta.content="width=device-width,initial-scale=1.0";
document.getElementsByTagName('head')[0].appendChild(oMeta);

var MainBox = React.createClass({
    render: function() {
        return (
    <div>
    <link rel="stylesheet" href="src/stylesheets/style.css"/>
    <link rel="stylesheet" href="src/stylesheets/swiper.min.css"/>
    <div className="swiper-container">
        <div className="swiper-wrapper">
            <div className="swiper-slide">Slide 1</div>
            <div className="swiper-slide">Slide 2</div>
            <div className="swiper-slide">Slide 3</div>
            <div className="swiper-slide">Slide 4</div>
            <div className="swiper-slide">Slide 5</div>
            <div className="swiper-slide">Slide 6</div>
            <div className="swiper-slide">Slide 7</div>
            <div className="swiper-slide">Slide 8</div>
            <div className="swiper-slide">Slide 9</div>
            <div className="swiper-slide">Slide 10</div>
        </div>
        <div className="swiper-pagination"></div>
    </div>
    </div>
        );
    }
});
render(<MainBox/>, document.getElementById('mainDiv')
);
$(document).ready(function () {
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    direction: 'vertical'
});
});

浏览器显示的效果不对

---

你加swiper的样式了没有？

---

你需要在react的生命周期内去写这些操作
具体应该是dom已经同步到网页
方法名称我忘记了