如何将 react-router transitionTo 与 react-slick 一起使用？答案

【问题标题】：How to use react-router transitionTo with react-slick?如何将 react-router transitionTo 与 react-slick 一起使用？
【发布时间】：2015-07-21 16:36:08
【问题描述】：

我正在使用 react-slick(https://github.com/akiran/react-slick) 制作轮播。在轮播的每张幻灯片上，我都想更改 react-router(https://github.com/rackt/react-router) 处理程序。

这是我的轮播：

var Carousel = React.createClass({
mixins: [ Navigation],

render() {
    var settings = {
        dots: false,
        infinite: true,
        arrows: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        beforeChange: function(event){
            transitionTo('about') // this is where I want to transition to different paths
        },
        initialSlide: 3
    };
    return (
        <Slider {...settings}>
            <div><h3></h3></div>
            <div><h3>2</h3></div>
            <div><h3>3</h3></div>
            <div><h3>4</h3></div>
            <div><h3>5</h3></div>
            <div><h3>6</h3></div>
        </Slider>
    );
}
});

这是我的反应路线代码：：

var routes = (
  <Route name='app' path='/' handler={App}>
    <Route name='home' handler={Home}/>
    <Route name='about' handler={About}/>
    <DefaultRoute handler={Home}/>
  </Route>
);



Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler />, appContainer);
});

【问题讨论】：

标签： reactjs react-router slick.js

【解决方案1】：

我将轮播组件嵌套在父组件中并调用this.context.router.transitionTo()。

var App = React.createClass({
  mixins: [ Navigation ],

  render() {
    console.log(this);
    var self = this;
    var settings = {
        dots: false,
        infinite: true,
        arrows: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        initialSlide: 0,
        afterChange: function(event){
            console.log(event);
            var path = event.toString();
            self.context.router.transitionTo(path);
        }

    };
    return(

    <div className="grid-frame vertical">
        <div className="grid-content shrink" style={{padding: 0}}>
            <ul className="primary condense menu-bar">
                <li><a><strong>Nav</strong></a></li>
                <li><Link to="home">Home</Link></li>
                <li><Link to="1">About</Link></li>
            </ul>
        </div>
        <div className="grid-content carousel-container">
            <div className="grid-container">
                <Slider {...settings}>
                    <div><h3>1</h3></div>
                    <div><h3>2</h3></div>
                    <div><h3>3</h3></div>
                    <div><h3>4</h3></div>
                    <div><h3>5</h3></div>
                    <div><h3>6</h3></div>
                </Slider>
            </div>
        </div>

        <div className="grid-content">
            <div className="grid-container">
                <RouteHandler />

            </div>
        </div>
    </div>

        );
}

});

【讨论】：