不能让React.createRef在这种特殊情况下工作

问题描述

阅读关于React.createRef()的{​​{3}}并看到这种简单的React（> = [email protected]）版本的方法：

从文档示例开始：

class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }

  componentDidMount() {
    this.textInput.current.focusTextinput();
  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />
    );
  }
}

请注意，这仅在CustomTextInput被声明为类时才有效：

class CustomTextInput extends React.Component {
  // ...
}

在这里，我有"react": "^16.8.4"的情况也一样，但是不起作用：

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import React,{ useRef
  } from 'react';
  import SliderWrapper from './SliderWrapper';

class Timeline extends React.Component {
    constructor(props) {
        super(props);
        this.changeHandler = this.changeHandler.bind(this);
        this.changeSlider = this.changeSlider.bind(this);
        this.state = {
            slideIndex: 1,updateCount: 0,};
        this.wrapper = React.createRef();
    }

    onImageClick = val => {
        const { onChangeAlbum } = this.props;
        onChangeAlbum(val);
    };

    onChangeUpdateCount() {
        this.changeUpdateCount.bind(this);
    }

    changeUpdateCount() {
        const { updateCount } = this.state;
        this.setState(
            {
                updateCount: updateCount + 1,},// () => console.log(`test state after update: ${updateCount}`),);
    }

    changeSlider() {
        this.setState({
            slideIndex: this.wrapper.current.slider.innerSlider.state.currentSlide,});
        // const { onChangeAlbum } = this.props;
        // onChangeAlbum(this.sliderWrapper.slider.innerSlider.state.currentSlide);
    }

    changeHandler(e) {
        this.wrapper.current.slider.slickGoTo(e.target.value);
    }

    render() {
        const { slideIndex } = this.state;
        const { updateCount } = this.state;

        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={this.wrapper}
                        beforeChanged={this.changeUpdateCount.bind(this)}
                        afterChanged={this.changeSlider.bind(this)}
                        slideIndex={slideIndex}
                        updateCounter={updateCount}
                    />
                </div>
            </section>
        );
    }
}

export default Timeline;

SliderWrapper子Component：

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 {

    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;

我最终使用了回调引用。不能这样做的原因是我的Custom Child Component使用React-Redux connect吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）