reactjs - React-bootstrap med Typescript: Användning av fill eller justify-prop orsakar Typescript-fel

Kod

import { useCallback, useState, useEffect } from 'react';
import { Tabs, Tab, Spinner, Alert } from 'react-bootstrap';

import { Categories } from '../../models/ICategory';
import IMovie from '../../models/IMovie';
import { getMovies } from '../../services/movies';
import Movies from '../Movies/index';


export default function Landing() {
    const [favourites, setFavourites] = useState<IMovie[]>([]);
    const [loading, setLoading] = useState<boolean>(true);
    const [error, setError] = useState<Error | null>(null);

    const fetchFavourites = useCallback(async () => {
        try {
            const favourites = await getMovies(Categories.Favourite);
            setFavourites( favourites );
        } catch (error) {
            setError( error as Error);
        } finally {
            setLoading(false);
        }
    }, []);

    useEffect(() => {
        fetchFavourites();
    }, [fetchFavourites]);

    if(loading) {
        return (
            <Spinner animation="border" role="status">
                <span className="visually-hidden">Loading...</span>
            </Spinner>
        )
    }

    if(!loading && error) {
        return (
            <Alert variant="danger">{error.message}</Alert>
        );
    }
    

    return (
        <Tabs
            defaultActiveKey={Categories.MoviesComing}
            id='landing-page-tab'
            className='mb-3 px-3'
            fill
        >
            <Tab eventKey={Categories.MoviesComing} title='Coming Soon'>
                <Movies category={Categories.MoviesComing} favourites={favourites} setFavourites={setFavourites} />
            </Tab>
            <Tab eventKey={Categories.MoviesInTheaters} title='In Theatres'>
                <Movies category={Categories.MoviesInTheaters} favourites={favourites} setFavourites={setFavourites} />
            </Tab>
            <Tab eventKey={Categories.TopRatedIndia} title='Top Rated In India'>
                <Movies category={Categories.TopRatedIndia} favourites={favourites} setFavourites={setFavourites} />
            </Tab>
            <Tab eventKey={Categories.TopRatedMovies} title='Top Rated'>
                <Movies category={Categories.TopRatedMovies} favourites={favourites} setFavourites={setFavourites} />
            </Tab>
            <Tab eventKey={Categories.Favourite} title='Favourites'>
                <Movies category={Categories.Favourite} favourites={favourites} setFavourites={setFavourites} />
            </Tab>
        </Tabs>
    )
}

Fel

FEL i src/components/Landing/index.tsx:50:13 TS2322: Typen '{ children: Element[]; defaultActiveKey: Categories; id: string; className: string; fill: true; }' går inte att tilldela typen 'IntrinsicAttributes & Pick

Samma sak händer när jag lägger till justify-prop på Tabs. React-Bootstrap-dokumentationen föreslår denna metod: https://react-bootstrap.github.io/components/tabs/#fill-and-justify Och det fungerar på webbsidan, men startar med ett fel och det kompileringsfelet.

Hur kan jag inkludera de där propsen utan Typescript-felet?

Svar #1

Använd @ts-ignore före attributet 'fill' för att tillfälligt inaktivera felet. Det kommer att fungera. Vi måste öppna ett ärende på deras Github-repository för att göra dem uppmärksamma på det. Demonstration nedan:

<Tabs
   defaultActiveKey={Categories.MoviesComing}
   id='landing-page-tab'
   className='mb-3 px-3'
   // @ts-ignore
   fill
  >
     <Tab eventKey={Categories.MoviesComing} title='Coming Soon'>
            <Movies category={Categories.MoviesComing} favourites={favourites} setFavourites={setFavourites} />
        </Tab>
        <Tab eventKey={Categories.MoviesInTheaters} title='In Theatres'>
            <Movies category={Categories.MoviesInTheaters} favourites={favourites} setFavourites={setFavourites} />
        </Tab>
        <Tab eventKey={Categories.TopRatedIndia} title='Top Rated In India'>
            <Movies category={Categories.TopRatedIndia} favourites={favourites} setFavourites={setFavourites} />
        </Tab>
        <Tab eventKey={Categories.TopRatedMovies} title='Top Rated'>
            <Movies category={Categories.TopRatedMovies} favourites={favourites} setFavourites={setFavourites} />
        </Tab>
        <Tab eventKey={Categories.Favourite} title='Favourites'>
            <Movies category={Categories.Favourite} favourites={favourites} setFavourites={setFavourites} />
        </Tab>
  </Tabs