reactjs - Stöd för defaultProps är föråldrat men visas fortfarande i den formella dokumentationen

När jag använder min komponent på detta sätt i React 18.2:

const Component = ({prop=true}) => (<div></div>)

Jag får detta felmeddelande i konsolen:

Stöd för defaultProps kommer att tas bort från funktionskomponenter i en framtida större version. Använd istället standardparameterar i JavaScript.

Ändå ger dokumentationen på https://react.dev/learn/passing-props-to-a-component#specifying-a-default-value-for-a-prop specifikt det sättet:

function Avatar({ person, size = 100 }) {}

Vad är det rätta sättet så att konsolen inte skriker på mig?

Svar #1

Detta fel hänvisar faktiskt till användningen av detta API som vi hade tidigare i äldre versioner av React:

const Component = ({ prop }) => (<div></div>);

Component.defaultProps = {
  prop: true,
};

Om du inte använder defaultProps och ändå får konsolvarningar, så finns det ett bibliotek i ditt projekt som använder detta API. Försök uppgradera biblioteket eller ersätt det med ett annat. Detta skulle lösa problemet.

Svar #2

Min kod var så här:

import React from 'react';
import SimpleText from './SimpleText';
import colors from '../../../styles/colors';
import { fontFamily } from '../../../styles/fonts';
import { useTheme } from '../../../hooks/useTheme';

const MessageText = props => {
  const {
    subtitleBold,
    fontFamily: fontFamilyStyle,
    color: colorStyle = colors.almost_black,
  } = props;
  const {
    theme: {
      text: {
        message: { color },
      },
    },
  } = useTheme();

  return (
    <SimpleText
      fontFamily={fontFamilyStyle ?? fontFamily.openSansRegular}
      color={colorStyle ?? color}
      fontWeight={subtitleBold ? 'bold' : 'normal'}
      {...props}
    />
  );
};

MessageText.defaultProps = {
  fontSize: 16,
  color: colors.almost_black,
  lineHeight: 24,
  fontWeight: 'normal',
};

export default MessageText;

Meddelandet om defaultProps i konsolen är borta (ignorera att jag förbättrade andra detaljer) Se hur jag gjorde:

import React from 'react';
import SimpleText from './SimpleText';
import colors from '@styles/colors';
import { fontFamily } from '@styles/fonts';
import { useTheme } from '@hooks/useTheme';

type MessageTextProps = {
  subtitleBold?: boolean;
  lineHeight?: number;
  fontFamily?: string;
  color?: string;
  fontSize?: number;
  [key: string]: any;
};

const MessageText = ({
  subtitleBold = false,
  lineHeight = 24,
  fontSize = 16,
  fontFamily: fontFamilyStyle,
  color: colorStyle = colors.almost_black,
  ...props
}: MessageTextProps) => {
  const {
    theme: {
      text: {
        message: { color },
      },
    },
  } = useTheme();

  return (
    <SimpleText
      fontFamily={fontFamilyStyle ?? fontFamily.openSansRegular}
      color={colorStyle ?? color}
      fontWeight={subtitleBold ? 'bold' : 'normal'}
      lineHeight={lineHeight}
      fontSize={fontSize}
      {...props}
    />
  );
};

export default MessageText;

Relaterade artiklar