Как правильно установить тип элемента, переданный в качестве параметра

Я пытаюсь установить тип элемента, переданного в качестве параметра, с помощью React.ComponentType.

import * as React from "react"

type BaseType = {
  element: React.ComponentType
}

const Base = ({element: Element}: BaseType) => (
  <Element />
)

const renderBase = (
  Component: React.ComponentType
) => <Base element = {Component} />

const Hello = () => renderBase(<h1>Hello</h1>)

Ошибка: Argument of type 'Element' is not assignable to parameter of type 'ComponentType<{}>'.

Пример детской площадки

Я считаю, что это React.ReactNode вместо JSX.Element или React.ComponentType

— 21.03.2022 20:42

@kellys Я пробовал, но ошибка меняется на JSX element type 'Element' does not have any construct or call signatures.

— 21.03.2022 20:57

reactjs typescript

21.03.2022 20:24

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы хотите передать элемент JSX в качестве реквизита, вы можете использовать тип JSX.Element, но вам также придется изменить Base, поскольку <Element/> предполагает, что Element является компонентом, а не элементом. Это работает, если вы просто возвращаете сам элемент:

type BaseType = {
  element: JSX.Element
}

const Base = ({ element }: BaseType ) => element

const renderBase = (element: JSX.Element) =>
  <Base element = {element} />

const Hello = () =>
  renderBase(<h1>Hello</h1>)

(Я также переименовал Element в element, чтобы подчеркнуть, что это не компонент.)

Площадка TypeScript

Как правило, это анти-шаблон React. Идиоматический способ включения уже обработанных элементов React в дерево рендеринга компонента — использовать props.children.

— 21.03.2022 21:38

21.03.2022 21:11