Как передать реквизит {детям} и использовать его?

Я пытаюсь сделать повторно используемый элемент ввода реакции. Реакт версия: "react": "17.0.2"

Я хочу передать htmlFor в метке и использовать то же самое в дочернем свойстве id. Итак, я пытаюсь передать реквизит {children} в ответ. Я пробовал передача реквизита из этого решения

      {React.cloneElement(children, { id: label })}

Мой компонент, использующий дочерние элементы.

import clsx from 'clsx';
import React from 'react';
import { FunctionComponent } from 'react'; // importing FunctionComponent

type FieldWrapperProps = {
  children: React.ReactNode;
  label: string;
  errorMessage?: string;
  className?: string;
};

export const FieldWrapper: FunctionComponent<FieldWrapperProps> = (props: FieldWrapperProps) => {
  const { children, label, errorMessage, className } = props;
  return (
    <div
      className={clsx('mt-6  flex flex-col justify-center tracking-wide align-middle', className)}
    >
      <label htmlFor={label} className="block text-gray-light text-base  font-bold mb-2 peer">
        {label}
      </label>
      {React.cloneElement(children, { id: label })}
      {/* {children} */}
      <p className="text-sm text-red-500 ">{errorMessage}</p>
    </div>
  );
};

Я использую это FieldWrapper в различных других элементах формы.

import { UseFormRegisterReturn } from 'react-hook-form';

import { FieldWrapper } from './FieldWrapper';

type InputFieldProps = {
  label: string;
  type: string;
  registration?: UseFormRegisterReturn;
  error?: string;
  placeholderText?: string;
  className?: string;
};

export const InputField = (props: InputFieldProps) => {
  const { type, label, registration, error, placeholderText, className } = props;
  return (
    <FieldWrapper label={label} errorMessage={error} className={className}>
      <input
        type={type}
        className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id={label}
        placeholder={placeholderText}
        {...registration}
      />
    </FieldWrapper>
  );
};

Также есть предупреждение о типе. type error

Вы должны иметь возможность использовать {props.children} напрямую.

catgirlkelly 22.04.2022 21:57
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
1
25
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вы получаете ошибку этого типа, потому что React.cloneElement() требует клонирования элемента; children не обязательно является элементом. Это ReactNode, псевдоним типа, включающий undefined и null. Это допустимые типы для возврат из компонента React, но не для передачи в cloneElement. Вместо этого вы можете сделать это:

children = React.Children.map(children, el => {
  return React.cloneElement(el, { id: label })
})

Это позволит вам клонировать каждый элемент по очереди. Если вы ожидаете только один элемент, React.Children.only() можно использовать аналогичным образом.

children = React.Children.only(children)
children = React.cloneElement(children)

Другие вопросы по теме

Передача vscode во внешние функции
Firebase: Почему мой код использует только первый документ в моей коллекции?
Реагировать на ошибку машинописного текста - элемент неявно имеет любой тип, потому что выражение строки типа не может использоваться для индексирования типа {}
Как получить доступ к вложенным необязательным индексам из интерфейса
Почему машинописный текст не может контекстуально вывести эти типы промежуточного программного обеспечения
Передать конструктор класса как функцию в другом классе
React & clsx: добавьте имя класса, если текущий элемент в сопоставленном массиве является первым из нескольких элементов
Свойство «MathFun» отсутствует в типе «(x?: число, y?: число) => число», но требуется в типе «Func».
Получение строки типа не может быть назначено строке типа для компонента TS в сборнике рассказов
Как ввести useState для файлов?