问题描述
我正在学习React a，我有这个文件Timeline.js，其中有两个Components。 Eslint警告说在同一文件中有两个Components，所以我将其移到它自己的文件中。
这是名为Component的{{1}}，它有自己的名为SliderWrapper.js的文件：并且已导出为Wrapper
SliderWrapper当我在下面的代码Timeline.js中使用import Slider from 'react-slick';
import { connect } from 'react-redux';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import React from 'react';
// import Resume from '../../resume.json';
import albums from '../../albumData.json';
const la = require('lodash');
class Wrapper extends React.Component {
shouldComponentUpdate(nextProps) {
// certain condition here,perhaps comparison between this.props and nextProps
// and if you want to update slider on setState in parent of this,return true,otherwise return false
// const { updateCount } = nextProps;
// const { updateCounter } = this.props;
// if (updateCounter !== updateCount) {
// return false;
// }
// console.log("shouldComponentUpdate");
return true;
}
sliders() {
const { articles } = this.props;
if (articles.length === 0) return null;
return articles.weeks.map(week => {
let photo = la.find(albums,{ weekNumber: week.weekNumber });
photo = encodeURIComponent(`${process.env.PUBLIC_URL}/images/weeks/${week.weekNumber}/${photo.coverImage}`);
const { onImageClick } = this.props;
return (
// Timeline items
<section className="timeline-carousel" key={week.weekNumber}>
<h1>week {week.weekNumber}</h1>
<div className="timeline-carousel__item-wrapper" data-js="timeline-carousel">
<div className="timeline-carousel__item">
<div className="timeline-carousel__image">
<img onClick={() => onImageClick(week.weekNumber)} alt="CoverImage" src={photo} />
<h2>UNDER CONSTRUCTION IN PROGRES..</h2>
</div>
<div className="timeline-carousel__item-inner">
<div className="pointer" />
<span className="year">{week.year}</span>
<span className="month">{week.albumDate}</span>
<p>{week.summary}</p>
<a href="#/" className="read-more">
Read more,Dev should go to read more
</a>
</div>
</div>
</div>
</section>
);
});
}
render() {
const { afterChanged } = this.props;
const { beforeChanged } = this.props;
const settings = {
dots: false,arrows: false,autoplay: false,infinite: true,lazyLoad: false,swipetoSlide: true,centerMode: false,focusOnSelect: false,className: 'center',slidesToShow: 4,afterChange: afterChanged,beforeChange: beforeChanged,responsive: [
{
breakpoint: 1024,settings: {
slidesToShow: 3,slidesToScroll: 3,infinite: false,},{
breakpoint: 600,settings: {
slidesToShow: 2,slidesToScroll: 2,initialSlide: 2,{
breakpoint: 480,settings: {
slidesToShow: 1,slidesToScroll: 1,],};
return (
<div>
<Slider
ref={slider => {
this.slider = slider;
}}
{...settings}
>
{this.sliders()}
</Slider>
</div>
);
}
}
const mapStatetoProps = state => {
return { articles: state.rootReducer.remoteArticles };
};
const SliderWrapper = connect(mapStatetoProps,null)(Wrapper);
export default SliderWrapper;
时，我得到：
TypeError：无法读取未定义的属性“滑块”
进一步研究时，我发现Timeline.js中的SliderWrapper是this.sliderWrapper。我必须得到它的参考，那才是我被卡住的时候！
我也尝试读undefined的{{1}}中的Doc on Refs来创建引用：
Constructor并像这样使用它：
Timeline但是它不起作用。
这里this.sliderWrapper = React.createRef();
被分配了ref={this.sliderWrapper}
，但是当我尝试使用它时，它是this.sliderWrapper：
ref={..这里是使用undefined
return (
<section className="hero is-dark has-bg-image">
<div className="c" id="timeline">
<p>Your at Album: {slideIndex} </p>
<input onChange={this.changeHandler} value={slideIndex} type="range" min={0} max={50} />
<SliderWrapper
onImageClick={this.onImageClick}
ref={sliderWrapper => {
this.sliderWrapper = sliderWrapper;
}}
beforeChanged={this.changeUpdateCount.bind(this)}
afterChanged={this.changeSlider.bind(this)}
slideIndex={slideIndex}
updateCounter={updateCount}
/>
</div>
</section>
);
在重构之前，这是两个组件都位于其中的Timeline.js文件：
SliderWrapper解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）