Question

我需要将我的App组件的所有子组件呈现到页面。

我做了什么

我在其中App（父）组件{this.props.children}和我的main.js（我使用路由器）我有：

render(<Router history={hashHistory}>
            <Route path="/" component={App}>
                <Route path="/blog" component={MiniBlog} />
                <Route path="/contact" component={Contact} />
                <Route path="/about" component={About} />
            </Route>
        </Router>,
document.getElementsByClassName('container')[0]);

这可以很好地响应路由器工作，因为当我点击相应的路由时组件会切换。

需要的行为

我需要在页面上显示所有子组件（一次，比如堆叠。）所以我可以使用路径（滚动动画的类型）设置活动组件的动画，而不是切换活动组件。

我不确定react-router是否适合这种情况，但我愿意接受有关如何做到这一点的任何建议。

谢谢！

Answer 1

查看react-router original example

只需更新您的CSS，而不是淡入淡出，它将会滑入，例如

.example-enter {
  opacity: 0.01;
  left: -1000px;
  transition: opacity .5s ease-in, left 1s;
}

.example-enter.example-enter-active {
  opacity: 1;
  left: 0px;
}

.example-leave {
  left: 0px;
  opacity: 1;
  transition: opacity .5s ease-in, left 1s;
}

.example-leave.example-leave-active {
  opacity: 0;
  left: 1000px;
}

同时调整适当的 ReactCSSTransitionGroup 转换属性，例如

transitionEnterTimeout={1000}
transitionLeaveTimeout={1000}

如何在使用react-router时一次呈现所有子组件

1 个答案: