[TS] React Children

0 0 0

이 JSX 태그의 'children' 속성에는 'string | Element' 형식의 자식 하나가 필요하지만, 여러 자식이 제공되었습니다.

// 기존 방법
children: string | [string , JSX.Element];

// 해결 방법
children: ReactNode;

기존 방식에서는 children에 두 개 이상의 요소가 들어가면 에러가 났지만, ReactNode로 바꾼 뒤에는 children에 몇 개가 들어가도 문제없이 동작했습니다.

import { ReactNode } from "react";
import * as S from "./Text01.styles";

interface ITextProps {
  size?: "14" | "16" | "18" | "20" | "24" | "28" | "32" | "40" | "54";
  weight?: "300" | "500" | "700";
  fontColor?:
    | "mainColor" // deepBrown
    | "subColor01" // brown
    | "subColor02" // beige
    | "subColor03" // lightBeige
    | "subColor04" // deepBeige
    | "black"
    | "white"
    | "gray"
    | "green"
    | "red";
  children: ReactNode;
}
export default function Text(props: ITextProps) {
  return (
    <S.Word size={props.size} weight={props.weight} fontColor={props.fontColor}>
      {props.children}
    </S.Word>
  );
}

댓글 0