反应检查自定义渲染器是否使用特定组件

Question

我正在尝试找到确保自定义渲染器使用特定组件的方法。

我的意思是

我有“自动完成”组件，该组件使用选项渲染下拉菜单，并且为单个选项实现自定义渲染器的功能，如下所示：

const createOptions: (options: (OptionGroup<string> | Option<string>)[]) => React.ReactNodeArray = options => {
    return options.map((option: Option<string> | OptionGroup<string>) => {
        if ('value' in option) {
            return (
                <OptionItem
                    key={option.label}
                    highlightedIndex={highlightedIndex}
                    index={index++}
                    option={option}
                    onChange={() => onChange && onChange(option)}
                    optionRenderer={optionRenderer}
                    setHighlightedIndex={setHighlightedIndex}
                />
            );
        } else {
            return optionGroupRenderer ? optionGroupRenderer(option) : (
                <div key={option.label}>
                    {option.label}
                    {createOptions(option.options)}
                </div>
            );
        }
    });
};

但是不能只有一个选项，在这里我可以接收optionsGroup，但是我不知道如何像这样限制用户在optionGroupRenderer中使用OptionItem组件

// custom renderer
// here we must ensure that optionGroup.options.map returns list of Option
// because here is some functionality, like index prop, setHighlightedIndex prop etc.
private optionGroupRenderer(optionGroup: OptionGroup<string>): React.ReactNode {
    return (
        <div>
            <span>{optionGroup.label}</span>
            <br/>
            _______
            {optionGroup.options.map(this.optionRenderer)}
        </div>
    );
}