Блог

Мне нужно использовать общий компонент ввода и добавить к нему различные функции, так что это то, что я придумал, но мне нужно передать некоторые реквизиты DatePickerComponent , которые определяются потребностями пользователя, и мне нужно передать некоторые реквизиты Input , и я должен разделить входящие реквизиты на два разных реквизита:

 import React, { useState } from 'react'; import Input, { InputProps } from '../Input'; import DatePickerComponent, { ReactDatePickerProps } from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css';  export interface DatePickerProps extends ReactDatePickerProps {  /**  * className to control DatePicker input className  */  className?: string;  /**  * the initial date of DatePicker  */  initialValue?: Date; }  const DatePicker: React.FClt;InputProps amp; DatePickerPropsgt; = ({  className,  initialValue,  ...props }) =gt; {  const [startDate, setStartDate] = useStatelt;Dategt;(initialValue || new Date());   return (  lt;Input  {...props}  inputContainer={  lt;DatePickerComponent  {...props}  calendarClassName="z-index-100"  popperClassName="z-index-100"  selected={startDate}  onChange={(date, event) =gt; {  props.onChange amp;amp; props.onChange(date, event);  setStartDate(date as Date);  }}  /gt;  }  /gt;  ); };  export default DatePicker;  

в дополнение к приведенному выше коду я попробовал это:

 export interface DatePickerProps extends ReactDatePickerProps {  /**  * className to control DatePicker input className  */  className?: string;  /**  * the initial date of DatePicker  */  initialValue?: Date;  inputProps: InputProps; }  const DatePicker: React.FClt;DatePickerPropsgt; = ({  initialValue,  inputProps,  ...props }) =gt; {  const [startDate, setStartDate] = useStatelt;Dategt;(initialValue || new Date());   return (  lt;Input  {...inputProps}  inputContainer={  lt;DatePickerComponent  {...props}  calendarClassName="z-index-100"  popperClassName="z-index-100"  selected={startDate}  onChange={(date, event) =gt; {  props.onChange amp;amp; props.onChange(date, event);  setStartDate(date as Date);  }}  /gt;  }  /gt;  ); };  

но я должен передать свои входные данные в объект, иначе это не сработает

 lt;DatePicker inputProps={  label: 'name',  required: true, } /gt;  

как я могу заставить его работать с машинописным текстом? с нетерпением ждем ваших решений, спасибо 🙂