我正在学习React JS并试图使用nuka-carousel创建一个可链接的轮播图像。我已经设置了一个数据文件来获取下面示例中的图像和链接等数据;
const RollList = [
{
headline: "Something Here 1",
paragraph: "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.",
img_src: "http://placehold.it/755x435/ffffff/c0392b/&text=slide1",
link: "/about",
id: "roll-1"
},
];
export default RollList;
图像加载到旋转木马中,但是我很难从函数中获取链接地址的值。我知道它可以在props
中找到,因为我可以在react dev工具插件中看到它。
var React = require('react');
import RollList from '../../data/roll';
var Carousel = require('nuka-carousel');
import { browserHistory } from 'react-router';
import { Link } from 'react-router';
const MonCarousel = React.createClass({
mixins: [Carousel.ControllerMixin],
handleLink(event) {
let linkName= event.target.value;
console.log(linkName);
// let path = `${linkName}`;
// browserHistory.push(path);
},
render() {
let moncarousel = RollList.map((roll) => {
return (
<img src={ roll.img_src } key={roll.id} onClick={this.handleLink} value={roll.link} onLoad={() => {window.dispatchEvent(new Event('resize'));}}/>
);
});
return (
<div>
<section class='carousel-section'>
<div class='container'>
<div className="featured-row">
<div className="carousel-block">
<h4>Featured</h4>
<div className="carousel-shadow">
<Carousel speed={1200} autoplayInterval={7999} autoplay={true} wrapAround={true}>
{ moncarousel }
</Carousel>
</div>
</div>
<div className="carousel-side">
<div className="btn yel-btn">
Get in touch with us
</div>
<small>something here</small>
<br />
<br />
<div className="btn yel-btn">
Get in touch with us
</div>
<small>something here</small>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur sequi, minus molestiae perspiciatis, debitis adipisci eaque in recusandae voluptatum! Reiciendis enim vero expedita eaque placeat eligendi tempore minus consequuntur sequi.</p>
</div>
</div>
</div>
</section>
</div>
)
}
});
module.exports = MonCarousel;