Frontender Libs - обзор библиотек JS / CSS

Уточнение типов для дочерних элементов

При типизации children в React-компонентах часто используют ReactNode. Данный тип, принимающий JSX, строки, числа и null, достаточно гибкий. Однако для создания более строгого API лучше подходит ReactElement.

Он представляет собой только результат вызова React.createElement, исключая примитивные типы вроде строк или чисел. Данный подход полезен для компонентов-оберток, которые должны работать только с другими React-компонентами, например, для клонирования или анализа их пропсов, делая их поведение более предсказуемым.

import { ReactNode, ReactElement } from 'react';

// ReactNode принимает почти любые значения
const FlexibleContainer = ({ children }: { children: ReactNode }) => {
  return <div>{children}</div>;
};

// ReactElement принимает только React-элементы
const StrictContainer = ({ children }: { children: ReactElement }) => {
  return <div>{children}</div>;
};

👉 @sWebDev

👍4

www.tgoop.com/sWebDev/3881

908 viewsJul 21 at 07:43

Уточнение типов для дочерних элементов

При типизации children в React-компонентах часто используют ReactNode. Данный тип, принимающий JSX, строки, числа и null, достаточно гибкий. Однако для создания более строгого API лучше подходит ReactElement.

Он представляет собой только результат вызова React.createElement, исключая примитивные типы вроде строк или чисел. Данный подход полезен для компонентов-оберток, которые должны работать только с другими React-компонентами, например, для клонирования или анализа их пропсов, делая их поведение более предсказуемым.

import { ReactNode, ReactElement } from 'react';

// ReactNode принимает почти любые значения
const FlexibleContainer = ({ children }: { children: ReactNode }) => {
  return <div>{children}</div>;
};

// ReactElement принимает только React-элементы
const StrictContainer = ({ children }: { children: ReactElement }) => {
  return <div>{children}</div>;
};

BY Frontender Libs - обзор библиотек JS / CSS