strong textI我有一个我在jsx
文件中创建的轮播组件。当我转到另一个页面并导航回该页面时,轮播不会重新渲染。我已经尝试更新我的路线以及调查所有可能的css
原因。我看到旋转木马容器在那里,但没有显示任何内容。
下面是我的jsx文件:
import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom'
import { Button, Icon } from 'react-materialize'
import ReactDOM from 'react-dom'
import './Carousel.css';
class Carousel extends Component {
render() {
return (
<Fragment>
<div>
<div class="row">
<div class="col s12">
{/* <!--Images and carousel items below --> */}
<div width="100%" id="carousel-div" class="carousel userInput">
<div class="left">
<a href="Previo" class="movePrevCarousel middle-indicator-text waves-effect waves-light">
<i class="material-icons left middle-indicator-text">chevron_left</i>
</a>
</div>
<a class="carousel-item submitBTN" id="letters" data-search='Sports' href="#letters">
<img height="190" width="400" src="https://toddlermasterclass.com/wp-content/uploads/2015/07/Fun-Games-For-Preschoolers.png"
alt="" />
</a>
<a class="carousel-item submitBTN" id="numbers" data-search='Music' href="#numbers">
<img height="190" width="400" src="http://imgsdown.1mobile.com/group1/M00/A5/58/S36rZlagE-mAOxmfAAQhEBsG6mg860.png" alt="" />
</a>
<a class="carousel-item submitBTN" id="colors" data-search='Technology' href="#colors">
<img height="190" width="400" src="https://i.ytimg.com/vi/e1dHmEJcMG0/maxresdefault.jpg" alt="" />
</a>
<a class="carousel-item submitBTN" id="memory-match" data-search='Food' href="#memory-match">
<img height="190" width="400" src="https://images-na.ssl-images-amazon.com/images/I/713UI4Vy1-L.png" alt="" />
</a>
<a class="carousel-item submitBTN" id="shapes" data-search='Arts' href="#shapes!">
<img height="190" width="400" src="https://i.ytimg.com/vi/AQbnbrTHgtA/maxresdefault.jpg" alt="" />
</a>
<a class="submitBTN btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</a>
<div class="right">
<a href="Siguiente" class="moveNextCarousel middle-indicator-text waves-effect waves-light">
<i class="material-icons right middle-indicator-text">chevron_right</i>
</a>
</div>
</div>
</div>
</div>
</div>
);
</Fragment>
)
}
}
export default Carousel;
下面是我的路由器文件:
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Parents from './components/Parents';
import Login from './components/Login';
import Home from './components/Home';
import About from './components/About'
import Cards from './components/cardGame';
import Carousel from './components/Carousel';
/* import ReactCarousel from './components/ReactCarousel'; */
import ColorGame from './components/colorGame/colorGame';
import NumberGame from './components/NumberGame/numberGame';
const AppRouter = () => {
// class AppRouter extends Component {
// render() {
return (
<Router>
<div>
{/* edit username */}
<Navbar username='User' message='welcome back!'/>
<Route path='/Login' component={Login} />
<Route path='/Home' component={Home} />
<Route path='/About' component={About} />
<Route path='/Parents' component={Parents} />
<Route path='/colorGame' component={ColorGame} />
<Route path='/cardGame' component={Cards} />
<Route path='/numberGame' component={NumberGame} />
</div>
</Router>
)
}
// }
export default AppRouter;
下面是我正在渲染我的轮播的Home.js文件:
import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
import { Button, Icon } from 'react-materialize'
import './Home.css';
import ReactDOM from 'react-dom';
import Carousel from '../Carousel';
/* import ReactCarousel from '../ReactCarousel'; */
class Home extends Component {
render() {
return (
<Fragment>
<Carousel />
{/* <ReactCarousel /> */}
</Fragment>
)
}
}
export default Home;
这是Navbar组件
import React, { Fragment } from 'react';
import { Link } from 'react-router-dom'
import './Navbar.css'
const Navbar = props => {
return (
<Fragment>
<nav className="navigation_container">
<div className="l-triangle-top"></div>
<div className="l-triangle-bottom"></div>
<div className="rectangle">
<div className="navigation">
<Link className='nav-item nav-link' to='/Parents'>Parents Place</Link>
<ul className="right hide-on-med-and-down">
<li><Link className='nav-item nav-link' to='/Home'>Home</Link></li>
<li><Link className='nav-item nav-link' to='/Login'>Logout</Link></li>
<li><Link className='nav-item nav-link' to='/About'>About</Link></li>
</ul>
</div>
</div>
<div className="r-triangle-top"></div>
<div className="r-triangle-bottom"></div>
</nav>
</Fragment>
)
}
export default Navbar;
当我导航回我的主页时,有人会帮我看看为什么旋转木马没有渲染?
你能展示你的<Navbar />
组件吗?既然你的家乡路径是path='/Home'
,请确保你的<Link to='/**H**ome'/>
有NavBar
我有同样的问题:旋转木马最初会渲染得很好,但在从另一个页面(使用React Router)导航回旋转木马后,旋转木马组件不会重新渲染。我找不到解决这个问题的方法。
我最终使用react-materialize library,不理想,但它确实为我解决了这个问题。希望它有所帮助,如果您确实找到了解决方案,请告诉我们! :-)