如何使用打字稿将道具从父母传递给孩子并做出反应？

Question

我想使用react和Typescript将道具从父母传递给孩子。我不确定如何添加它。

下面是我的代码，

function Parent () {
    return (
        <DateRangePicker
            onDatesChange={onDatesChange}
            focusedInput={focusedInput}
            onFocusChange={onFocusChange}
        />
    );
}

type Props = Omit<
    DayPickerRangeControllerShape,
    'numberOfMonths' | 'hideKeyboardShortcutsPanel' | 'noBorder'
>;

function DateRangePicker(props: Props) {
    return (
        <Wrapper>
            <DayPickerRangeController
                {...props}
                numberOfMonths={2}
                focusedInput={focusedInput} //this is not detected
                onFocusChange={onFocusChange} //this is not detected
            />
        </Wrapper>
    );
}

我如何添加focusedInput和onFocusChange道具来键入Props。 现在它给我错误。找不到名称“ focusedInput”。找不到名称“ onFocusChange”

有人可以帮我这个忙吗？谢谢。

Answer 1

...
interface IProps {
  focusedInput: Function
  onFocusChange: Function
}

type Props = Omit<
    DayPickerRangeControllerShape,
    'numberOfMonths' | 'hideKeyboardShortcutsPanel' | 'noBorder'
> & IProps;

function DateRangePicker(props: Props) {
    const {focusedInput, onFocusChange} = props
    return (
        <Wrapper>
            <DayPickerRangeController
                {...props}
                numberOfMonths={2}
                focusedInput={focusedInput} //this is not detected
                onFocusChange={onFocusChange} //this is not detected
            />
        </Wrapper>
    );
}