如何重构这个特定的Reactjs代码，使其符合Eslint

问题描述

我是一个Reactjs初学者，阅读了大量代码，对此感到迷茫。
我想更改此代码，使其符合Estlint，即：

“箭头功能不应返回赋值”

我读了docs，没什么大不了的，但是他们没有提到这个特殊情况。

我已经尝试过预先创建React-Slick Slider，以某种方式尝试获得对它的引用，但不知道如何做。就像创建一个类变量Sliter然后创建this.slider = slider一样，但这会带来很多错误

这是文件

/* eslint-disable react/jsx-props-no-spreading */
import Slider from 'react-slick';
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 SliderWrapper 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;
            }
            return true;
        }
    
        sliders() {
            return Resume.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>
            );
        }
    }
    
    export default SliderWrapper;

解决方法

通过仅在其中使用parens，代码创建了一个返回值的函数。因此，从本质上讲，您实际上是在编写这样的函数：

// example of what's generated with parens; don't do this!
function assignRef(slider) {
  return this.slider = slider;
}
// and later...
<Slider ref={assignRef} {...settings}>
  {this.sliders()}
</Slider>

这里不应该使用哪个。改用大括号

<Slider ref={slider => {this.slider = slider}} {...settings}>
  {this.sliders()}
</Slider>

// example of what's generated with curly braces,do not actually use.
// function assignRef(slider) {
//   this.slider = slider;
// }

这就是您要寻找的。​​ p>