如何解决这种特定的道具传播问题禁止Eslint警告

问题描述

初学者问题！正如问题所说的那样，禁止Eslint警告是如何解决此Prop传播的问题。

我真的必须像这样阅读Eslint doc上的警告：

const {dots,arrows,autoplay...........} = props;

对于所有道具还是有更简单的方法？

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>
    );
}

解决方法

Eslint只是强制您可以定义自己的样式。在这种情况下，您必须决定是否要在代码库中传播道具。

->如果允许，则只需在eslint配置中禁用react/jsx-props-no-spreading规则。

->如果不允许，则必须显式地分解每个属性。这就是该定罪规则的全部要点。强迫您明确命名这些道具，以避免将不必要的道具传递到组件树中。