ریاکتجیاس - کامپوننتهای استایلشده و تایپاسکریپت: هیچ سربارگذاری با این فراخوانی مطابقت ندارد

من تازه با Style Components آشنا شدهام و دارم تلاش میکنم یک برنامه هواشناسی با استفاده از React Native بسازم. معمولاً از CSS modules استفاده میکنم اما به نظر میرسد که این گزینه برای توسعه موبایل موجود نیست.

کد اینجا است:

import ThemeModel from 'models/ThemeModel'
import React, { PureComponent } from 'react'
import styled from 'styled-components/native'

interface HomeScreenComponentInterface {
  theme?: ThemeModel
  getWeatherData: () => void;
  isLoading: boolean | null;
}

class HomeScreenComponent extends PureComponent<HomeScreenComponentInterface> {
  componentDidMount() {
    const { getWeatherData } = this.props

    getWeatherData()
  }

  render() {
    const Container = styled.View`
    padding: 20px 0;
  `
    const HeaderText = styled.Text`
    color: ${(props: HomeScreenComponentInterface) => props.theme && props.theme.colors.lightBlue};
    font-size: ${(props: HomeScreenComponentInterface) => props.theme && props.theme.fontSizes.xLarge};
    font-weight: 500;
  `
    return (
      <Container>
        <HeaderText>Weather App</HeaderText>
      </Container>
    )
  }
}

و این یک عکس از خطا است:

این فایل Theme.tsx است

import React, { FC, ReactNode } from 'react'
import { ThemeProvider } from 'styled-components'

const theme = {
  colors: {
    powderWhite: '#FFFDF9',
    persianGreen: '#06B49A',
    lightBlue: '#AFDBD2',
    onyx: '#36313D',
  },
  fonts: ['sans-serif', 'Roboto'],
  fontSizes: {
    small: '12px',
    medium: '16px',
    large: '24px',
    xLarge: '32px',
  },
}

interface ThemeProps {
  children: ReactNode
}

const Theme: FC<ThemeProps> = ({ children }) => (
  <ThemeProvider theme={ theme }>{children}</ThemeProvider>
)

export default Theme

من فکر میکنم فقط نیاز دارم props تم را به این کامپوننت منتقل کنم، اما نمیتوانم بفهمم چگونه این کار را انجام دهم..

هر کمکی بسیار قدردانی خواهد شد.

پاسخ شماره ۱

interface HomeScreenComponentInterface {
  theme?: ThemeModel          // optional  
  getWeatherData: () => void; // required
  isLoading: boolean | null;  // required
}

خطای No overload matched this call به این دلیل رخ میدهد که <HeaderText> انتظار دارد ویژگیهای مورد نیاز طبق رابطی که تعریف کردهاید را دریافت کند. آنها را اختیاری کنید و باید کار کند.

من با همان مشکل روبرو بودم. تغییر مقادیر props که در اینترفیس تعریف شدهاند به حالت اختیاری؟ مشکل را برای من حل کرد.

مثال با خطا:

interface CustomStyleProps {
     width: number;
     height: number;
};

const CarouselContainer = styled.div<CustomStyleProps>`
   display: flex;
   width: ${props => (props.width || 100) + `px`};
   height: ${props => (props.height || 100) + `px`};
`;
 
return(
     <CarouselContainer/> // Error : No overload matched this call
)

مثال بدون خطا:

interface CustomStyleProps {
      width?: number;
      height?: number;
};
    
 const CarouselContainer = styled.div<CustomStyleProps>`
     display: flex;
     width: ${props => (props.width || 100) + `px`};
     height: ${props => (props.height || 100) + `px`};
 `;

 return(
     <CarouselContainer/> // No Error
 )

پاسخ شماره ۲

 const HeaderText = styled.Text`
     color: ${({ theme }) => theme.colors.lightBlue};
 `;

شما نیازی ندارید که نوع تم را در رابط props (HomeScreenComponentInterface) وارد کنید. ThemeProvider تم را به تمام کامپوننتهای استایلشده درون فرزندان خود ارائه میدهد. تایپاسکریپت این خطا را ایجاد میکند چون شما به کامپوننت استایلشده HeaderText گفتهاید که انتظار props های isLoading و getWeatherData را داشته باشد. این props ها برای رندر کردن کامپوننت استایلشده ضروری نیستند.