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

Question

我想使用反应和打字稿将道具从父母传递给孩子。我不知道如何将其添加到类型中。

下面是我的代码，

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 道具添加到类型道具。现在它给了我错误。找不到名称“focusedInput”。找不到名称“onFocusChange”

有人可以帮我解决这个问题。谢谢。

标签： reactjstypescript

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>
    );
}