React 中 props validation 缺少 ESLint 如何解决？

Question

我正在使用 React 使用 swiperJS 创建一个小型旋转木马，我有以下代码：

import { Swiper } from "swiper/react";
import React from "react";

export default function SwiperContainer(props) {
    const { slides, navigation = true, clickable = true, dynamicBullets = true } = props;
    return (<Swiper dir="rtl" lazy={true} slidesPerView={1} spaceBetween={30} breakpoints={{
        // when window width is >= 320px
        320: {
            slidesPerView: 2, spaceBetween: 10
        }, // when window width is >= 640px
        640: {
            slidesPerView: 2, spaceBetween: 10
        }, // when window width is >= 768px
        768: {
            slidesPerView: 2, spaceBetween: 10
        }, // when window width is >= 1024px
        1024: {
            slidesPerView: 4, spaceBetween: 10
        },
    }} navigation={navigation} pagination={{
        "clickable": { clickable }, "dynamicBullets": { dynamicBullets }
    }} className="what-customer-say-swiper pt-1 pb-1" style={{ zIndex: 0, }}>
        {slides}
    </Swiper>);
}

我在我的项目中使用 ESLint，但它给了我这个错误。

Line 5:13:  'slides' is missing in props validation          react/prop-types
Line 5:21:  'navigation' is missing in props validation      react/prop-types
Line 5:40:  'clickable' is missing in props validation       react/prop-types
Line 5:58:  'dynamicBullets' is missing in props validation  react/prop-types

Answer 1

您应该为您的组件定义 PropTypes

export default function SwiperContainer(props) {
    const { slides, navigation = true, clickable = true, dynamicBullets = true } = props;
    return (<Swiper dir="rtl" lazy={true} slidesPerView={1} spaceBetween={30} breakpoints={{
        // when window width is >= 320px
        320: {
            slidesPerView: 2, spaceBetween: 10
        }, // when window width is >= 640px
        640: {
            slidesPerView: 2, spaceBetween: 10
        }, // when window width is >= 768px
        768: {
            slidesPerView: 2, spaceBetween: 10
        }, // when window width is >= 1024px
        1024: {
            slidesPerView: 4, spaceBetween: 10
        },
    }} navigation={navigation} pagination={{
        "clickable": { clickable }, "dynamicBullets": { dynamicBullets }
    }} className="what-customer-say-swiper pt-1 pb-1" style={{ zIndex: 0, }}>
        {slides}
    </Swiper>);
}

SwiperContainer.propTypes = {
  slides: PropTypes.arrayOf(PropTypes.element),
  navigation: PropTypes.bool,
  clickable: PropTypes.bool,
  dynamicBullets: PropTypes.bool 
}

React 中 props validation 缺少 ESLint 如何解决？

How to solve ESLint is missing in props validation in React?

reactjs

eslint